This web site has pages that haven't been modified since late 1995, when cheswick.com was first registered. The HTML in those pages and the HTML standards have changed for the better since then. It is time for me to learn a bit about cascading style sheets, try my hand once again at typography, and clean up this site.
Your comments on my efforts are welcome.
I am generating three items:
The firefox firebug tool as has been especially helpful for examining the effects of the style sheet rules. The CSS font and text style wizard helped when examining font issues.
There are nicely-designed pages out there, and I need to learn more from them. One example I like is Jennifer Kyrnin's pages on web design at About.com.
I have carefully accepted the default font size, which honors the browser owner's preferences for text size. In order to reach the ten-words-per-line rule, I set the text width as a function of font size:
width: 33em;
The typical use of underscore for links is jarring, though people are getting used to it. I tried some subtle color changes, and may still employ them. But I think italics is the way to go. Traditional texts use italics for new concepts or foreign words. Denoting a link is consistent.
For hovering, the typical underline is shown. Alas, there is no hover for iPhones.
I am still working on the visited/not visited colors for links. I think I want the not-visited links to stand out slightly, perhaps with a little purplishness, and visited ones to fade to text color. All retain italics (or perhaps oblique.)
If one follows a header immediate with text:
<h3>Default behavior</h3> Some text here.
There is no specific style for the text "Some text here." It is "body level", and various web sites advise against it. Body level sets an indent for unaffiliated text.
Since I want my text indented 5em, I tried avoiding body level settings and just had all the styles move in to 5em, or whatever. But that meant that such unaffiliated text would indent 0em, where I don't want it.
Originally, I told the style to indent everything on a regular screen 5 em, and then undent things like header labels. This worked for everything I tried, until I ran into IE version 6. Now I don't care much about such an old browser, but it is in the spirit of this project to try to work easily with as many browsers as possible.
I use body-level text throughout my web pages. It would be a pain to go postpend a <p> to each of them, and I can't find a CSS option that switches to paragraph mode automatically.
So I am back to body level indent of 5em. We will see how the compatibility works out.
The iPhone CSS page sets iPhone-specific settings, then calls the standard ches.css. This seems to work well, and requires only a little bogosity in the web page boiler plate.
Apple wants the iPhone to be indistinguishable from "screen" type in the CSS media. They don't even give us a non-standard media, like "iPhone".
One answer is to use active content to send the right stuff. This is also the usual answer for including html content.
This is the wrong decision. Active content is much harder to secure than simple web pages, and encouraging gratuitous active content is a Bad Idea.
Fortunately, the CSS using screen width seems to work well enough on the target browsers, and adds only a little cruft to the boilerplate.
You aren't using my screen! and Why shouldn't I be
able to set the width I want? I don't like scrolling!
I have reflected on the ten-word-per line rule considerably since I
first encountered in LaTeX and TeX. In numerous web pages, and non-double
columned papers I have read, the long lines
I am convinced that the pros are right. Text columns should not be much wider than ten words. It effects readability, and the object of good typography is to enhance the reading experience.
What about all your white space, especially when viewing my web pages? The rule is for columns of text, not for entire web pages, which are a bit more analogous to a newspaper layout. So I am arguing strongly for the text to follow something like my rules. That doesn't mean there can't be a helpful navigation column on the left (see an older effort, my CV for an example which I might extend to more of my web pages, at least on non-iPhone accesses.
I would consider creating multiple columns of text on your wide screen, if I could figure out how to do it. Longer text has to been either scrolled, multi-columned, or linked on another page. A lot of people use the last option, and I don't like it. It interrupts the reading flow with a network access and makes it difficult to search an entire article for particular text. The interaction of scrolling and multicolumn is a problem: where do you draw the line. Scrolling up and down on a column switch is annoying.
If I do multicolumn, the text will be seen on one screen, multi-columned, and then you scroll down to the next part of the text. This is similar to reading an academic paper written in multicolumn format, and seen with a pdf viewer, though the pages would not be as obvious. I have no idea if I can get CSS rules to do this.
Some like to use fixed fonts to retain better control over the text layout. Indeed they do, and I think it is a mistake. I understand their concerns. Alas, fixed fonts ruin every page I look at. I need bigger text, and end up having to use the screen zoom in with my Mac. I would suggest to these people that fixed fonts (unless they are quite large) will make their page much less readable to people over 40.
They don't know whether I am looking at a 1024x768 screen, or 1920x1200. Proper text size for the former is mere noseprint on the latter. And, am I using a 19 inch monitor, or 27 inch? They don't know, so their sizes are not helpful. A proper style sheet should attempt to render well with a variety of user choices.