In my other blog, I wanted to show images to one side of the text, like this:
XXXXXX +--------+ XXXXXX | iframe | XXXXXX +--------+ XXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX
The images, generated by Amazon, are within an iframe element. After some false starts, I found that the simplest solution was to wrap the iframe elements in a div element, and float the div:
<div style="float:right"> <iframe> ... </iframe> </div> <p> ... </p>
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:
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.
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").
While finding it easier to read text using narrower columns using my custom CSS definition, I noticed that it didn't work on pages that use table rows for grouping sections, such as the following structure:
table
tbody
tr
td
<headings>
p …
Here's the CSS definition I was using:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(java.sun.com)
{
body {
max-width : 35em;
}
}
It appears that the max-width property defined in the <body> element property isn't inherited by the <p> elements within the <table>. My first fix was to select all the elements in the path between <body> and <p> and make them inherit the max-width property:
…
table, tbody, tr, td {
max-width : inherit;
}
This isn't a nice solution because I would have to specify all the possible types (or elements) that could be in a table cell. It would be better the use the CSS universal selector, *, instead:
…
* {
max-width : inherit;
}
Now the definition is even applied to some elements that we don't really want to limit in size. Elements that are naturally wider than max-width, such as images in <img> tags, are now squashed, while preformatted text in <pre> elements are displayed in boxes with horizontal scrollbars.
If the max-width property is set to none
, then the width of an element is not limited. The solution is to have two rules, a universal selector and a type selector, and we have a CSS definition that limits the width of all elements except for <div>, <img> and <pre>:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(java.sun.com)
{
body {
max-width : 35em;
}
* {
max-width : inherit;
}
div, img, pre {
max-width : none;
}
}
This definition works because the universal selector is a less specific than a type selector, so the rules for <div>, <img> and <pre> override the universal selector's rule.
As usual when hacking code, I now realise that there's no longer any need to use inherit
and I can simplify my CSS definition by specifying the max-width of every type using the universal selector.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(java.sun.com)
{
* {
max-width : 35em;
}
div, img, pre {
max-width : none;
}
}
To see the effects of the different definitions, add the style to your Stylish add-in, visit this Sun Java page and observe what happens to the width of the navigation bar on the top of the page and the sequence diagram images.
It's easier to read on a web page if the columns aren't too wide. This presentation Ideal line length for content suggests setting the values of the min-width and max-width CSS properties around 30 em. Columns of 30 em sounds very narrow for a PC-based browser, but I expect it makes sense for browsers on handheld devices.
Using the Stylish Firefox add-in, here's my Narrow Paragraph
rule for sites that I read:
@-moz-document domain(<domain 1>)
, domain(<domain 2>) {
body {
min-width : 25em;
max-width : 30em;
}
}
Earlier, I used the width CSS property but when the browser window is made narrower than the width's value, the width of the text column doesn't change and you have to scroll left and right to read. Setting both min-width and max-width gives the designer and reader some flexibility in layout and viewing, respectively.
In an earlier entry, I wrote about using the @media print rule in a CSS file to insert the value of URLs in the print version of a web page. If the webmaster of the site didn't provide this rule, can you still print the URLs?
If you are using the Firefox Stylish add-in, you can provide your own CSS file to apply to a web site. I tried this:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.gamedev.net") {
@media print {
a:after { content:" (" attr(href) ")"; }
}
}
… but it didn't work. It seems that the Mozilla / Firefox @-moz-document rule doesn't allow @-rules within it (see the Mozilla links below).
If you move the @media print outside of @-moz-document rule, as below, then any page that you print will include URL strings in the output.
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.gamedev.net") {}
@media print {
a:after { content:" (" attr(href) ")"; }
}
The only way to manage this behaviour is to disable that stylesheet in Firefox's User Styles page of the Add-ons dialog.
When you print a web page, you'd naturally expect to see the URL of a link, instead of just the name of the link (usually the underlined text). If you are the webmaster of a site, you could generate a different page formatted for printing (for example, look for the print link in many news sites). Another way is to add the following rule into your CSS file:
@media print {
a:after { content:" (" attr(href) ") "; }
}
The rule above will append the value of the URL after the link. How does it work?
You can see the effect of this rule in my web site; just use the Print Preview function in your browser and examine the text after each link.
It is hard to read a lot of text in a wide browser window, so below are two GreaseMonkey scripts to make the text columns narrower. They both work by changing an element's CSS width to a percentage of the window width.
If the text is within a known element tag (e.g. p), try the following script, which iterates through the collection of elements and sets the elements CSS width.
for each (e in document.getElementsByTagName('p')) {
e.style.width = '60%';
}
If all the text is all within a single containing element, such as the body element, then the script can be shortened to …
document.getElementsByTagName('body')[0].style.width = '60%';.
If you want to also centre the text in the window, just change move the left margin by adding e.style.marginLeft = '20%';. marginLeft is the Javascript equivalent of CSS' margin-left property.
Later … I realised that since we're only changing CSS properties, it's a lot easier to use the Stylish add-in. Just add a style sheet like this:
body {
margin-left : 20%;
width : 60%;
}
Motivated by Gmail's Terminal theme, I hacked a similar theme for an internal Web site using Firefox's Greasemonkey and Stylish add-ins. My approach was to write some small Greasemonkey scripts to touch up different parts of all pages independently, then use Stylish to apply style definitions (the theme) from one CSS file. If you want to create another theme for this site, just create a new CSS file.
Instant theme!
After using the Firefox Stylish add-in to increase the contrast between the text and background colours of domains, I wanted to apply the same rule to different domains. In this case, I want to reuse the text colour of P elements in two or more domains.
Open a Stylish script and note that it has a sequence of @-moz-document definitions, for example:
@-moz-document domain(addons.mozilla.org) {
p { color : black; }
}
@-moz-document domain(msdn.com) {
p { color : black; }
}
The @-moz-document rule can accept a comma-separated URL list, so I can re-use my style definition like this:
@-moz-document domain(addons.mozilla.org), domain(msdn.com) {
p { color : black; }
}
It makes my eyes water to read grey text on a white background, so much so that I was motivated to learn how to use the Greasemonkey Ain't It Readable script to set text in <p> elements to black. Using Greasemonkey just to set a single CSS attribute was an overkill, so I turned it off and wrote this rule for the Stylish add-in: p { color:black; }.
The Stylish add-on for Firefox is really, really neat. Create your own custom CSS stylesheets or install pre-defined ones in userstyles.org. Stylish will apply the style sheet based on a URL pattern.
I've installed …