printing "sidenotes" in IE6/7

[JWS]

I make "sidenotes" in a simple html page with the following css:

div#content {
margin-right: 22%;
}

..sidenote {
float: right;
clear: right;
margin: 0 -28% 1em 1em;
width: 25%;
}

Using this as follows:

<div id="content">
<p>(text of paragraph A)</p>
<span class="sidenote">(sidenote for paragraph B)</span>
<p>(text of paragraph B)</p>
</div>

This works quite well, for display and printing, both in IE 6/7,
and in Mozilla & derivatives. The outer rectangle represents the
"page":

+--------------------------------------------------------+
|+-----------------------------------+ |
|| | |
|| PARAGRAPH A | |
|| | |
|+-----------------------------------+ |
|+-----------------------------------+ +----------------+|
|| | | SIDENOTE FOR B ||
|| PARAGRAPH B | | ||
|| | +----------------+|
|| | |
|+-----------------------------------+ |
+--------------------------------------------------------+

But I want right-justified text (especially for printing), so I
add in css for div#content:

text-align: justify;

This also displays OK in the browsers mentioned, but when printing
with IE 6/7 I get:

+--------------------------------------------------------+
|+-----------------------------------+ |
|| | |
|| PARAGRAPH A | |
|| | |
|+-----------------------------------+ |
| +----------------+|
| | SIDENOTE FOR B ||
| | ||
| +----------------+|
|+-----------------------------------+ |
|| | |
|| PARAGRAPH B | |
|| | |
|| | |
|+-----------------------------------+ |
+--------------------------------------------------------+

Why does this happen? Any suggestions/tricks to fix this?

 

[Jukka K. Korpela]

Scripsit JWS:

I make "sidenotes" in a simple html page with the following css:

Looks OK (using floating), but as usual, a URL would have helped to see the
technique in action.

But I want right-justified text (especially for printing),

Justification is seldom justified for web pages. There are many bugs in
browsers in its implementation, the quality of justification is poor, and
long words easily mess it up. For a barrow sidenote, even modestly long
words cause too big gaps between words.

This also displays OK in the browsers mentioned, but when printing
with IE 6/7 I get:

It's inconvient to change the font to monospaced (in my newsreader at
least), so a verbal description and a URL would have been better. The
problem seems to be that on printing (or in Print Preview), the sidenote
does not appear as floating but as separate between paragraphs, with empty
space on the left of it.

Why does this happen? Any suggestions/tricks to fix this?

This probably relates to the widths and margins. For example, setting width:
70% for the div removes the problem, though it changes the layout. I'm not
sure I follow your ideas with the horizontal spacing and widths, but here's
a different approach:

div#content p {
width: 74%;
float: left;
margin-bottom: 1em;
text-align: justify; }

..sidenote {
float: right;
clear:right;
width: 22%; }

This seems to avoid the problem in printing. Naturally, you might need to
change the first selector with a suitable list of selectors, if the
"content" id may have other elements than p elements (and sidenotes) inside
it.

The problem with this approach is that it's not possible if you would like
to set the sidenote width in em units and let the normal text occupy what's
left (minus some margins).

 

[Ben C]

Scripsit JWS:


Looks OK (using floating), but as usual, a URL would have helped to see the
technique in action.


Justification is seldom justified for web pages. There are many bugs in
browsers in its implementation, the quality of justification is poor, and
long words easily mess it up. For a barrow sidenote, even modestly long
words cause too big gaps between words.

The OP did say "right-justified", which I take to mean "right-aligned",
i.e. not justified.

 

[Jukka K. Korpela]

Scripsit Jukka K. Korpela:

div#content p {
width: 74%;
float: left;
margin-bottom: 1em;
text-align: justify; }

.sidenote {
float: right;
clear:right;
width: 22%; }

Yet another approach is to set right padding for the paragraphs (and other
containers inside "content"). This approach can be used both with % settings
and with em settings, e.g.

div#content p {
padding-right: 10em;
text-align: justify; }

..sidenote {
float: right;
clear:right;
width: 8em; }

 

[JWS]

Scripsit JWS:

I make "sidenotes" in a simple html page with the following
css: [..]

Looks OK (using floating), but as usual, a URL would have
helped to see the technique in action.

OK: http://www.jw-stumpel.nl/stestu.html

Of course the actual css (especially print css) in the page is
more complicated than the simplified example that I posted.

Justification is seldom justified for web pages. [..]

Depends, I think, on how it is used. In an otherwise uncluttered
design, and with well-chosen line spacing, I rather like it.
Especially for printing. Just a matter of taste, I think.

[..] and long words easily mess it up. For a narrow sidenote,
even modestly long words cause too big gaps between words.

True. The <wbr> tag might help (it actually works in IE and in
Mozilla c.s.), but it isn't official html, I understand. I went to
some trouble to make really long words (file pathnames)
"breakable" in my page.

[..]The problem seems to be that on printing (or in Print
Preview), the sidenote does not appear as floating but as
separate between paragraphs, with empty space on the left of
it.

Yes, that's it. But only in IE, not in Mozilla c.s. (or Opera).

This probably relates to the widths and margins. For example,
setting width: 70% for the div removes the problem, though it
changes the layout. I'm not sure I follow your ideas with the
horizontal spacing and widths, but here's a different approach:

div#content p {
width: 74%;
float: left;
margin-bottom: 1em;
text-align: justify; }

.sidenote {
float: right;
clear:right;
width: 22%; }

This seems to do weird things with the vertical placement of the
sidenotes (completely different weirdnesses with IE and the
Mozilla family BTW). Must investigate further.

Of course I could always put

<!--[if IE]>
<STYLE>
div#content {
text-align: left;
}
</STYLE>
<![endif]-->

giving up my nice justified layout for the IE users..

Thanks very much for your reply

Jan

 

[Beauregard T. Shagnasty]

The OP did say "right-justified", which I take to mean "right-aligned",
i.e. not justified.

The OP also said, just below the ascii art:

 

[Jonathan N. Little]

Scripsit JWS:

I make "sidenotes" in a simple html page with the following
css: [..]

Looks OK (using floating), but as usual, a URL would have
helped to see the technique in action.

OK: http://www.jw-stumpel.nl/stestu.html

Of course the actual css (especially print css) in the page is
more complicated than the simplified example that I posted.

Justification is seldom justified for web pages. [..]

Depends, I think, on how it is used. In an otherwise uncluttered
design, and with well-chosen line spacing, I rather like it.
Especially for printing. Just a matter of taste, I think.

Well, justification on narrow columns without sophisticated letter
spacing and kerning will result in that classic newspaper effect:

UTF-8, and other

Which lends neither legibility nor appealing design. For printing, why
not just box your sidenotes and bring them inline with to body text.

 

[Jukka K. Korpela]

Scripsit Jonathan N. Little:

Well, justification on narrow columns without sophisticated letter
spacing and kerning will result in that classic newspaper effect:

UTF-8, and other

It tends to result in a simplistic rendering where just word spacing is
adjusted, but I don't think it's adequate to call this "that classic
newspaper effect". Newspaper typography varies in quality, but what I'd call
_classic_ uses a more elaborate method.

In fact, the nonstandard CSS declaration text-justify: newspaper, as
supported by IE, makes justification more clever. As Microsoft puts it:
"Increases or decreases the spacing between letters and between words. It is
the most sophisticated form of justification for Latin alphabets."

Source:
http://msdn.microsoft.com/library/d...or/dhtml/reference/properties/textjustify.asp

Pragmatically speaking, if you use text-align: justify, you should also use
text-justify: newspaper, if your document uses the Latin script. It improves
the situation on IE and causes no harm on other browsers.

 

[JWS]

Pragmatically speaking, if you use text-align: justify, you
should also use text-justify: newspaper, if your document uses
the Latin script. It improves the situation on IE and causes no
harm on other browsers.

Didn't know about the 'newspaper' property. Will try it. But IMHO
it would be better if a (language-sensitive) word-breaking
algorithm would be applied first (and then, if necessary, followed
by a letter-spacing algorithm). Word processors have had automatic
word-breaking for ages; why not browsers?

Jan

 

[JWS]

Well, justification on narrow columns without sophisticated letter
spacing and kerning will result in that classic newspaper effect:

UTF-8, and other

Which lends neither legibility nor appealing design. For printing, why
not just box your sidenotes and bring them inline with to body text.

Ehh.. I am not quite sure what you mean. Should I just give up the
idea of having sidenotes? I.e. put them in the kind of boxes (with
white background) like I have now on my site? Or do you mean
something else?

 

[Bergamot]

Should I just give up the idea of having sidenotes?

Why don't you just leave the sidenotes left aligned instead of
justified? As Mr Little said, justified text in a narrow column is
pretty lousy for both looks and readability.

 

[Jonathan N. Little]

Ehh.. I am not quite sure what you mean. Should I just give up the
idea of having sidenotes? I.e. put them in the kind of boxes (with
white background) like I have now on my site? Or do you mean
something else?

Display one way and print another...

Display as sidenotes for folks viewing the page:

+-----------------+
| main text block |
| |
| |
+-----------------+
+-----------------++-----+
| main text block ||side |
| ||note |
| |+-----+
| |
| |
+-----------------+

But change style to simplify for printing:

+-----------------+
| main text block |
| |
| |
+-----------------+
+----------+
| sidenote |
+----------+
+-----------------+
| main text block |
| |
| |
| |
| |
+-----------------+

Then margin not a issue and readability is maintained. I often have a
different style for printing that removes floats, use serif fonts,
removes navbars and other web access stuff like underlines for links
that are meaningless on the printed page, etc.

 

[JWS]

Why don't you just leave the sidenotes left aligned instead of
justified?

I tried that, but it won't work. IE6/7 printing still pushes up
the sidenotes into a gap between paragraphs, even if the sidenodes
are "ragged right". To prevent this, the main text has to be
"ragged right" as well.

As Mr Little said, justified text in a narrow column is
pretty lousy for both looks and readability.

That, as I said, is a matter of taste; I just happen to prefer
justified text (as does 500 years of typographical tradition BTW).

But of course my question was not about "esthetics" but about
"technology": I just want to find out how to do it (never mind if
it is "beautiful" or not).

Jan

 

[JWS]

Display one way and print another...[..]

Display as sidenotes for folks viewing the page: But change
style to simplify for printing:[..]

Then margin not a issue and readability is maintained. I often
have a different style for printing that removes floats, use
serif fonts, removes navbars and other web access stuff like
underlines for links that are meaningless on the printed page,
etc.

My page, as it is, already uses a very different style for
printing than for displaying. 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). Unfortunately some of these things (like "no gaps between
paragraphs") do not seem to work in IE, so I am looking for
work-arounds.

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?

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..

Jan

 

[Bergamot]

That, as I said, is a matter of taste; I just happen to prefer
justified text (as does 500 years of typographical tradition BTW).

You are ignoring 2 important points:

1. Browsers don't render the same as print, nor should you expect them
to. Different media and all that.

2. The bit about *narrow columns*. Justified text in a reasonably wide
column is usually less of a readability issue. In narrow columns it just
sucks.

But of course my question was not about "esthetics"

That doesn't mean we can't comment on it and offer suggestions that
might make the layout better. This is Usenet, after all. You are just as
free to ignore our posts as we are to make them.

 

[Jukka K. Korpela]

Scripsit JWS:

But IMHO
it would be better if a (language-sensitive) word-breaking
algorithm would be applied first (and then, if necessary, followed
by a letter-spacing algorithm). Word processors have had automatic
word-breaking for ages; why not browsers?

Who knows? They just didn't bother? Word division is not trivial, and _good_
word division software can cost real money. For many languages, large
hyphenation dictionaries are needed for good results. Besides, even if a
browser supported just one hundred languages, for example, there would be
quite some code.

 

[Jukka K. Korpela]

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".

 

[dorayme]

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

Ah, but, earlier in your post, you gave a previous argument as to
why there was a table-relationship in all this so it is not
purely a layout issue. <g>

Ages ago I gave an argument (in response to Jonathan Little which
no doubt very few if any would have understood or appreciated) to
show that there _was_ a tabular relationship between a side
navigation column and a right content column when taking account
the website as a whole and not merely an individual page. When
one finds it convenient to use a table, it is not too hard to
find arguments. I thought yours not too bad. I still think mine
was good.

 

[JWS]

"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.

I found out what was the matter now: as selector I had used the
"its child" property:

div > p {margin: 0;}

but it seems that IE does not understand "its child". So wherever
possible I now avoid "its child"; this cured a few IE problems
(like "no gaps between paragraphs", and the headlines in the white
boxes on my page, which should be centered and bold, but were not
displayed as such by IE). In some other cases I still have to
define a few new classes, as you said, to get the effects I want
(e.g. no gaps between paragraphs which are children of the white
boxes, even on screen).

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.

Yes.. it also seems IE does not understand the p+p ("two
consecutive paragraphs") selector, which handles the "first
paragraph" problem automatically.

That was my concern too, with the two approaches I suggested,
considering what happens when style sheets are off.

Right, and also in text browsers such as lynx; that was also my
concern with my original design. It would be better to display the
notes after the paragraph in such cases, preferably preceded by a
warning like "NOTE:"; but it seems there is no reliable media
selector for text browsers. There is @media tty, but lynx at least
does not recognise it.

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 [..]

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. [..]

You are quite right, I bow my head in shame. I'll try to avoid
this kind of thing in the future. I am anyway very impressed by
this forum.

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> [..]

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

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

Very nice-looking!

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

I do not have an ideological position in this, but.. tables are so
"square". If a sidenote is taller than its accompanying paragraph,
display of the next paragraph is pushed down until the sidenote
finishes. This is not so nice; sidenotes waste space (or paper)
anyway, and such wastage should not be made worse if it can be
avoided.

With the float element approach on the other hand, available
margin space is used for the long sidenote while the action on the
text side goes on uninterrupted. There are differences in
behaviour between IE and Mozilla if a long sidenote meets another
sidenote, though. Mozilla pushes the next sidenote down, while IE
pushes the text side (plus the sidenote) down.

Jan

 

[Jukka K. Korpela]

Scripsit dorayme:

Ah, but, earlier in your post, you gave a previous argument as to
why there was a table-relationship in all this so it is not
purely a layout issue. <g>

Yes, my statement was not entirely serious.

Ages ago I gave an argument (in response to Jonathan Little which
no doubt very few if any would have understood or appreciated) to
show that there _was_ a tabular relationship between a side
navigation column and a right content column

Sounds like a hopeless case.

when taking account
the website as a whole and not merely an individual page.

A page is a page. Either your page contains tabular data, or it doesn't.

When
one finds it convenient to use a table, it is not too hard to
find arguments. I thought yours not too bad. I still think mine
was good.

I think yours is much worse. There is no correspondence between the
navigation "column" and the content "column". The navigation column could be
described as one by N matrix, but it would be rather illogical to consider
the content as another "column", except purely for layout.

My table, on the other hand, exhibits genuine tabular relationships: the
text and the notes run in parallel. Each note relates to piece particular
text (in a cell). What could be _more_ tabular (assuming you haven't got the
odd idea that only numbers can be tabulated)? Some pieces of text have no
associated note (or, we may say, the associated note is empty), but that's
not abnormal in tables.