|
|
Posted by Jukka K. Korpela on 04/25/07 11:09
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).
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Navigation:
[Reply to this message]
|