12 July 2009

java.sun.com - improve online readability

Since I read a lot of Sun Java development documentation online, here is a more readable style. I only applied a small number of changes to avoid accidentally screwing up the site's presentation:

  1. Set text columns' maximum width to 30em. Elements which may be naturally wide, such as <img> (for images) and <pre> (for sample code), are not affected. Text is easier to scan if the columns aren't too wide.
  2. Set font family in <code> and <pre> (usually code samples) from Courier to Consolas or Courier New. Courier characters don't seem to get aliased (right term?) properly and look broken up on my notebook screen. Does anyone else have this problem? I chose Consolas because it matches the font I use in my IDEs sessions, and Courier New as a second choice because if Consolas is not available.
  3. Set <pre> background from gray to transparent. Sun marks up code samples in different ways, so it doesn't work in all pages.

Sun does not mark up all text in tags. For example, in javax.sql package summary, the text that follows <h2> headings cannot be styled since CSS cannot select text nodes. Might check if this a limitation of javadoc or whether API documentation writers have to explicitly mark up their paragraphs in <p> tags.

05 July 2009

Blogger full window width edit box

The text pane in Blogger's edit page is rather cramped and becomes full when you're writing more than a couple of paragraphs. After looking at Blogger Wide Screen Editor, I thought it should be possible to write a style to automatically fit the edit box in a browser's window.

My Blogger full window width edit box style just changes the width of <div> elements from fixed values to auto so the edit box can fill the width of the window. A bonus of this technique is that the tabs and controls automatically stay close to the right hand border when you resize your browser's window.

Just to avoid unplanned effects on the Blogger pages, I've set my style to only be applied to Blogger's post pages using url-prefix("http://www.blogger.com/post").