Posted by Jukka K. Korpela on 04/25/07 21:38

Scripsit JWS:

> I tried to get a "typographical"
> effect in print (i.e. first-line indented paragraphs, no gaps
> between paragraphs, side-notes in a smaller font, and of course
> sidenotes printed in black; all of these different from the screen
> style).

Sounds reasonable.

> Unfortunately some of these things (like "no gaps between
> paragraphs") do not seem to work in IE, so I am looking for
> work-arounds.

"No gaps" works well on IE, but you have to be careful with the selectors.
Setting
p { margin: 0; text-indent: 1.3em; }
works fine. What remains is setting text-indent to 0 for the first
paragraph, and you might use a class for the purpose or just let IE up to
version 6 display the first paragraph with indent.

> But printing the notes belonging to a paragraph actually before
> the paragraph itself -- that would be a very bad idea IMHO. What
> would the poor reader think?

That was my concern too, with the two approaches I suggested, considering
what happens when style sheets are off. I tried various strategies like
making the paragraphs floated so that a paragraph would precede the
side-note. And I almost found something working, until I realized that I
breaks if the side-note is taller than the paragraph.

> Anyway as I said in the previous message: I do not want advice
> about style, but about technology. Even if my style is ugly, I'd
> like to know how I can achieve this ugliness..

Repeating such things has an adverse effect on your chances of getting help.
We kinda like to keep this is as a discussion forum, not a helpdesk. By
paying for the advice you might make sure that you only get advice you want;
or maybe not, because it's part of professional pride to tell the paying
customer when he wants something completely mad.

Anyway, this topic is intriguing and practically important, so in spite of
your request, here's my technical conclusion:

Back to the drawing table. Since we're going to need some markup anyway to
indicate which fragments of texts are sidenotes, we might just as well use
simple table markup, which is rather logical since it expresses the
relationships:

<table>
<tr><td>text</td> <td class="note">note</td></tr>
...
</table>

When you have parts of the text with no sidenote, just leave the second cell
empty.

This works tolerably even when CSS is off, and e.g. in speech browsing, the
text would appear before the note.

Then you could add some CSS to make the presentation nice, e.g.

table { border-collapse: collapse; }
td { width: 40em; }
td {
vertical-align: top;
padding: 0;
text-align: justify;
font-family: Georgia, serif; }
td p { margin: 0; text-indent: 1.3em; }
tr:first-child p { text-indent: 0; }
td.note{
width: 15em;
font: 90% Arial, sans-serif;
padding-left: 1.5em;
text-align: left; }

(This justifies just the text, not the notes. If you prefer to justify the
notes too, just remove the last declaration, text-align: left;.)

Demo page: http://www.cs.tut.fi/~jkorpela/test/notes.html

As extra bonus, this lets the author set a maximum width for text without
setting a fixed width. Of course the max-width property would do that, but
it's not supported by IE 7, whereas the method of setting a width for a cell
works on fairly old browsers, too, almost by magic, effectively as setting
_maximum_ width.

Now please excuse me white I fetch my asbestos suit and prepare to getting
flamed for recommending "tables for layout".

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Back to original message]