printing "sidenotes" in IE6/7

printing "sidenotes" in IE6/7

am 25.04.2007 10:44:00 von 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:


(text of paragraph A)


(sidenote for paragraph B)

(text of paragraph B)




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?

Re: printing "sidenotes" in IE6/7

am 25.04.2007 13:09:01 von jkorpela

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/

Re: printing "sidenotes" in IE6/7

am 25.04.2007 14:41:49 von Ben C

On 2007-04-25, Jukka K. Korpela wrote:
> 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.

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

Re: printing "sidenotes" in IE6/7

am 25.04.2007 14:41:54 von jkorpela

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; }

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

Re: printing "sidenotes" in IE6/7

am 25.04.2007 14:45:42 von JWS

Jukka K. Korpela wrote:

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

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

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

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



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

Thanks very much for your reply

Jan

Re: printing "sidenotes" in IE6/7

am 25.04.2007 15:31:30 von a.nony.mous

Ben C wrote:

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

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

> text-align: justify;

--
-bts
-Motorcycles defy gravity; cars just suck

Re: printing "sidenotes" in IE6/7

am 25.04.2007 15:59:58 von lws4art

JWS wrote:
> Jukka K. Korpela wrote:
>
>> 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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: printing "sidenotes" in IE6/7

am 25.04.2007 17:44:48 von jkorpela

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/default.asp?url=/workshop/ author/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.

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

Re: printing "sidenotes" in IE6/7

am 25.04.2007 18:14:48 von JWS

Jukka K. Korpela wrote:

> 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

Re: printing "sidenotes" in IE6/7

am 25.04.2007 18:41:23 von JWS

Jonathan N. Little wrote:

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

Re: printing "sidenotes" in IE6/7

am 25.04.2007 20:25:04 von Bergamot

JWS wrote:
>
> 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.

--
Berg

Re: printing "sidenotes" in IE6/7

am 25.04.2007 20:44:10 von lws4art

JWS wrote:
> Jonathan N. Little wrote:
>
>> 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?

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.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: printing "sidenotes" in IE6/7

am 25.04.2007 21:12:51 von JWS

Bergamot wrote:
> JWS wrote:
>> Should I just give up the idea of having sidenotes?
>
> 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

Re: printing "sidenotes" in IE6/7

am 25.04.2007 21:24:53 von JWS

Jonathan N. Little wrote:

> 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

Re: printing "sidenotes" in IE6/7

am 25.04.2007 21:48:44 von Bergamot

JWS wrote:
> Bergamot wrote:
>
>> 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).

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.

--
Berg

Re: printing "sidenotes" in IE6/7

am 25.04.2007 23:09:13 von jkorpela

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 ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Re: printing "sidenotes" in IE6/7

am 25.04.2007 23:38:10 von jkorpela

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:



...
text note


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/

Re: printing "sidenotes" in IE6/7

am 26.04.2007 02:04:01 von dorayme

In article <5RPXh.43509$Fz3.14261@reader1.news.saunalahti.fi>,
"Jukka K. Korpela" wrote:

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

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.

--
dorayme

Re: printing "sidenotes" in IE6/7

am 26.04.2007 13:09:25 von JWS

Jukka K. Korpela wrote:

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

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.

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

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:

>

[..]

> 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

Re: printing "sidenotes" in IE6/7

am 26.04.2007 19:12:28 von jkorpela

Scripsit dorayme:

> In article <5RPXh.43509$Fz3.14261@reader1.news.saunalahti.fi>,
> "Jukka K. Korpela" wrote:
>
>> 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.

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.

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

Re: printing "sidenotes" in IE6/7

am 26.04.2007 19:21:00 von Ben C

On 2007-04-26, Jukka K. Korpela wrote:
> Scripsit dorayme:
[...]
>> 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)?

For me the essence of a table is that it represents some function of two
inputs. So, for example, if I have "foods" in the rows, and "vitamins"
in the columns, I can lookup how much vitamin A in a carrot, or C in an
apple by reading the values of the function from the table.

Annotating text with notes doesn't really have this characteristic,
although you could probably stretch the idea.

But, to answer your question, the table of vitamins and foods is
something that is more tabular.

Re: printing "sidenotes" in IE6/7

am 26.04.2007 19:23:47 von jkorpela

Scripsit JWS:

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

IE 6 does not recognize the selector div > p, so it ignores the entire rule.
IE 7 recognizes it, though only in "Standards Mode".

> So wherever possible I now avoid "its child";

That's a good practical principle at present.

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

Similarly, p+p is supported in IE 7 in Standards Mode, not otherwise in IE.

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

That's a problem with tables, and an asset. But you could organize the table
so that one cell in the left column contains _one or more_ paragraphs,
including all paragraphs before the next paragraph to which a note is
attached. This would imply that a gap is created in the left column only if
you have some relatively short text with a long sidenote and then
(immediately or after short texts) some other text that has a sidenote. In
such a case a gap is more or less necessary anyone.

This would been slightly illogical markup, since you would have



so that "text" contains first the paragraph that the note relates to, then
perhaps one or more other paragraphs. In an attempt to please the purists
(including my puristic self), we might write as follows:




but I don't think it would really be an improvement in logical structure.

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

Re: printing "sidenotes" in IE6/7

am 26.04.2007 21:44:34 von JWS

Jukka K. Korpela wrote:

> That's a problem with tables, and an asset. But you could
> organize the table so that one cell in the left column contains
> _one or more_ paragraphs, including all paragraphs before the
> next paragraph to which a note is attached.

Well.. all things considered.. I've come to a conclusion.

The content of my page is Linux-oriented; only about 14 % of
the visitors use IE. I'll redesign it to make it IE-compatible
wherever I can (like avoiding ">" and "+" in selectors, by
creating some extra classes).

But changing from css layout to table layout, just to enable
printing in IE, is too much (i.e. too much work now, and too much
work in the future while maintaining the page). I'll just use a
"conditional comment" (if that's what it's called) to make
everything "ragged right" for IE users, with @media print. That
will produce acceptable (although IMHO not optimal) printing
behaviour for these users.

Thanks all, and especially Yucca, for the stimulating discussion.

Jan

Re: printing "sidenotes" in IE6/7

am 27.04.2007 00:25:47 von dorayme

In article ,
"Jukka K. Korpela" wrote:

> Scripsit dorayme:
>
> > In article <5RPXh.43509$Fz3.14261@reader1.news.saunalahti.fi>,
> > "Jukka K. Korpela" wrote:
> >
> > 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.
>

I imagine almost everyone thinks my defence of a left col as
navigation and a right col as content as tabular is bad and
hopeless! I think it is still a thing of truth and beauty and
general unimportance. So much so, that I will repeat it here and
make it clearer for anyone interested.

First, let me say I do not use tables for such on any new
projects - and that I think it generally a bad idea. But it is
not quite as bad as some people think and certainly not for the
reason of the mantra that tables on a per page basis should show
a clear tabular relationship across the table row by row etc as
in classic paradigms.

Your statement "A page is a page. Either your page contains
tabular data, or it doesn't." is a statement about what you see
as crucially relevant. My view is that there is a deeper table
that will simply not be seen if you stick so solidly to the earth
this way. Dr Johnson once kicked a stone and said "I refute it
thus!" when challenging Bishop Berkeley about the nature of the
material world. It is generally considered a poor argument in
spite of the good doctor likely being more right than the good
bishop.

The argument is quite simple but it requires one to see that the
real and far more important table in a site that has 2 cols, left
nav and right content is a three dimensional one and is as big in
one dimension as the site itself. Once you see it this way,
suddenly there is grip for hanging a tabular relationship.

In the left col: about Deborah, about Fred, about George with
"about Deborah" highlighted in some way to indicate current. In
the right col, spiel about Deborah. Now, if you merely look at
the Deborah page, you will say that the "about Fred" link has no
tabular relationship to the actual right content. Indeed, you
would be right. But in the table I am thinking of, this link has
a direct tabular relationship to the right content on the "about
Fred" page. All the pages are part of the 3-D table.

I know some people will say it is ridiculous to redefine the
common meaning of table in this way, that it is a trick. But in
truth, when authors use a table for this particular layout
purpose, I say it is more in accordance with what they are
actually doing, it is a better description, a truer account of
their general reasonableness.

All this is not to be confused with some sort of licence to use
tables as layout generally. In so many convoluted table designs,
no such defence as above is available and I have no reason to
concoct one.

--
dorayme

Re: printing "sidenotes" in IE6/7

am 27.04.2007 12:38:49 von jkorpela

Scripsit Ben C:

> For me the essence of a table is that it represents some function of
> two inputs.

Markup is about relationships, not functions and input. A table is a data
structure, not a function. A table is logically a list of lists with the
same number of items and with some meaningful relationship across the inner
lists so that the n'th items in inner lists have some connection with each
other. For example, a simple table of results in a game, with names and
points scored by each player, is a two-item list where the n'th item of the
first list and the n'th item in the second list are connected so that the
former contains the name of a player and the latter the result of that
player. This is a logical (or abstract) structure and need not have any
visual manifestation; the table might be internal to a data base so that you
can only ask for a result by the player name and get a single result.

Similarly, a structure consisting of a list of paragraphs and a list of
annotations to them is a table purely logically. Admittedly, none of the
cells in it is a simple name-like thing, as the player names, by which you
could make queries. But this depends on the nature of the content.

> So, for example, if I have "foods" in the rows, and
> "vitamins" in the columns, I can lookup how much vitamin A in a
> carrot, or C in an apple by reading the values of the function from
> the table.

(Off-topic: Carrots don't contain vitamin A; they contain provitamins from
which vitamin A may be produced by humans and other eaters.)

Besides, you could use lookup on the other columns as well, e.g. to find out
which food contains most vitamin C, or more than 50 mg / 100 g of it, or
something like that. You could do this with a program if you open the HTML
table in MS Excel for example. Some day some browser vendor might even get
the wild idea of letting users manipulate tables in a spreadsheet manner.

> Annotating text with notes doesn't really have this characteristic,
> although you could probably stretch the idea.

There is no need to _stretch_. Lookup issues are not essential in tablehood,
and they depend on the nature of the content, among other things. For prose
content, you would just need different lookup methods, such as looking for
paragraphs (or notes) containing some specific words or patterns.

> But, to answer your question, the table of vitamins and foods is
> something that is more tabular.

It's a more typical table, but not more of a table.

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

Re: printing "sidenotes" in IE6/7

am 27.04.2007 16:30:50 von Ben C

On 2007-04-27, Jukka K. Korpela wrote:
> Scripsit Ben C:
>
>> For me the essence of a table is that it represents some function of
>> two inputs.
>
> Markup is about relationships, not functions and input.

Functions and input _are_ relationships.

> A table is a data structure, not a function.

I see no distinction at this level of abstraction (c.f. why many
programming languages use parentheses or brackets both for array
indexing and function calls).

> A table is logically a list of lists with the same number of items and
> with some meaningful relationship across the inner lists so that the
> n'th items in inner lists have some connection with each other. For
> example, a simple table of results in a game, with names and points
> scored by each player, is a two-item list where the n'th item of the
> first list and the n'th item in the second list are connected so that
> the former contains the name of a player and the latter the result of
> that player.

> This is a logical (or abstract) structure and need not have any
> visual manifestation

Certainly. Not to be confused with "table" in "display: table" which is
of course a completely different use of the word from "table" in

text note
text 1 note
text 2
.

Re: printing "sidenotes" in IE6/7

am 27.04.2007 23:56:49 von dorayme

In article ,
"Jukka K. Korpela" wrote:

> A table is logically a list of lists

A table certainly contains lists. It may even contain a list of
lists. But, I am having trouble believing it is (logically) a
list of lists. I am not sure. But I cannot rule it out as there
may be a way of so arguing your statement.

A list of lists in the sense in which we have become familiar on
this newsgroup would perhaps be a nested list. A nested list
further details or shows associations of particular list items in
the nest.

In a simple table, I can almost persuade myself:

Deborah 28
Fred 39
Alice 84

looks logically to display the same content and relationships as

Deborah
28
Fred
39
Alice
84

But you only have to add another column in addition to age, say,
place of birth, to experience difficulties in this.

So, I would say that a table is something basic in the scheme of
things or at least it is not easily reduced in thought to the
notion of lists (though you are quite right to think they are an
essential part of the idea). A table, like no other thing,
displays relationships. It can have or have implied, captions and
headings and these play a crucial role.

But, as I say, it is possible someone might argue your statement
in a persuasive way that at the moment eludes me.


> with the
> same number of items and with some meaningful relationship across the inner
> lists so that the n'th items in inner lists have some connection with each
> other. For example, a simple table of results in a game, with names and
> points scored by each player, is a two-item list where the n'th item of the
> first list and the n'th item in the second list are connected so that the
> former contains the name of a player and the latter the result of that
> player.

--
dorayme

Re: printing "sidenotes" in IE6/7

am 28.04.2007 07:13:45 von dorayme

In article
,
dorayme wrote:

> I know some people will say it is ridiculous to redefine the
> common meaning of table in this way, that it is a trick. But in
> truth, when authors use a table for this particular layout
> purpose, I say it is more in accordance with what they are
> actually doing, it is a better description, a truer account of
> their general reasonableness.

dorayme, when you talk like this, you make people like Pugh think
you are on drugs, people like Bergamot get infuriated and Korpela
will simply see it as babble. Be a good girl or boy or creature
or whatever you are and try not to frighten the horses so much.
Remember, you are on a public forum.

--
dorayme

Re: printing "sidenotes" in IE6/7

am 28.04.2007 07:59:18 von dorayme

In article
,
dorayme wrote:

> In article
> ,
> dorayme wrote:
>
> > I know some people will say it is ridiculous to redefine the
> > common meaning of table in this way, that it is a trick. But in
> > truth, when authors use a table for this particular layout
> > purpose, I say it is more in accordance with what they are
> > actually doing, it is a better description, a truer account of
> > their general reasonableness.
>
> dorayme, when you talk like this, you make people like Pugh think
> you are on drugs, people like Bergamot get infuriated and Korpela
> will simply see it as babble. Be a good girl or boy or creature
> or whatever you are and try not to frighten the horses so much.
> Remember, you are on a public forum.

Yes ok, I know what you mean. It is just that I think it is never
made very clear that there is a difference in kind and not merely
in degree between at least two types of uses for html tables for
non-paradigmatic tabular purposes.

In the one case, it is merely a device to arrange bits of the
page how the author wants, often for aesthetic or other
convenient purposes that do not include tabular motives. There
are especially good reasons for avoiding this.

But in the other case, there are tabular motives. The idea of the
3-D table was merely a device to bring this out. Another way of
putting it is that all the links in a navigational left column
can have a tabular relationship to items in a right col, but the
location of the right col is not on the same page but on another
page. This makes it a very different creature to the "purely for
display" table, it is much closer to the very idea of tabular
cross col mechanism that is at the heart of tables.

It is not a black and white thing. There are degrees and there
are complexities. Purists, like ideologues everywhere, are prone
to condemning with a very broad brush.

And if the sleepy heads on the north of this planets will not
come out to play with me, well, damn hell, I cannot expect anyone
in the southern hemi, meaning basically Africa, South America and
Australia to do so for the simple reason that on a Sat avo, they
are all at the footy or cricket. But you, dorayme, are always
prepared to talk to me.

--
dorayme

Re: printing "sidenotes" in IE6/7

am 28.04.2007 12:22:13 von Ben C

On 2007-04-28, dorayme wrote:
> In article
>,
> dorayme wrote:
>
>> In article
>> ,
>> dorayme wrote:
>>
>> > I know some people will say it is ridiculous to redefine the
>> > common meaning of table in this way, that it is a trick. But in
>> > truth, when authors use a table for this particular layout
>> > purpose, I say it is more in accordance with what they are
>> > actually doing, it is a better description, a truer account of
>> > their general reasonableness.
>>
>> dorayme, when you talk like this, you make people like Pugh think
>> you are on drugs, people like Bergamot get infuriated and Korpela
>> will simply see it as babble. Be a good girl or boy or creature
>> or whatever you are and try not to frighten the horses so much.
>> Remember, you are on a public forum.
>
> Yes ok, I know what you mean. It is just that I think it is never
> made very clear that there is a difference in kind and not merely
> in degree between at least two types of uses for html tables for
> non-paradigmatic tabular purposes.
>
> In the one case, it is merely a device to arrange bits of the
> page how the author wants, often for aesthetic or other
> convenient purposes that do not include tabular motives. There
> are especially good reasons for avoiding this.
>
> But in the other case, there are tabular motives. The idea of the
> 3-D table was merely a device to bring this out. Another way of
> putting it is that all the links in a navigational left column
> can have a tabular relationship to items in a right col, but the
> location of the right col is not on the same page but on another
> page. This makes it a very different creature to the "purely for
> display" table, it is much closer to the very idea of tabular
> cross col mechanism that is at the heart of tables.
>
> It is not a black and white thing. There are degrees and there
> are complexities. Purists, like ideologues everywhere, are prone
> to condemning with a very broad brush.

The truth is a table (as opposed to a

) is _really_ a rectangular
grid. It can be used to represent various kinds of relationships, and so
those are what we're clutching at in our quest for the abstract table.

So long as the relationships aren't purely layout ("A should appear
to the right of B", etc.) anything goes really.

Re: printing "sidenotes" in IE6/7

am 28.04.2007 12:49:21 von dorayme

In article ,
Ben C wrote:

> On 2007-04-28, dorayme wrote:

> > Another way of
> > putting it is that all the links in a navigational left column
> > can have a tabular relationship to items in a right col, but the
> > location of the right col is not on the same page but on another
> > page. This makes it a very different creature to the "purely for
> > display" table, it is much closer to the very idea of tabular
> > cross col mechanism that is at the heart of tables.
> >
> > It is not a black and white thing. There are degrees and there
> > are complexities. Purists, like ideologues everywhere, are prone
> > to condemning with a very broad brush.
>
> The truth is a table (as opposed to a

) is _really_ a rectangular
> grid. It can be used to represent various kinds of relationships, and so
> those are what we're clutching at in our quest for the abstract table.
>
> So long as the relationships aren't purely layout ("A should appear
> to the right of B", etc.) anything goes really.

Yes, an html table is a special thing, distinct from the
varieties of tables in the print medium. Btw, Periodic tables of
physical elements are rarely actually rectangular! They meander a
bit and need a certain understanding on the part of the viewer to
read it right - often helped by colour coding.

One of the objections to the use of tables for layout is that
they are hard to maintain, another is that they do not have a
clear semantics when so used. I have heard it also said that it
is not as friendly on accessibility grounds. You must know by now
(without necessarily agreeing of course) that I regard a two col
table with nav in one col and content in the other (or something
similar) as a rather special case, having rights that mere run of
the mill table layout messes can never claim.

It is endlessly fascinating to me how hard some people go to
avoid such and go to endless trouble for it. I have been tending
not to use tables for this (tho I have not got around to changing
one site I have in this respect) because I rather like the idea
of "columns" not being so regular and "finishing together" in
website construction. I like what you can do with floats and
things. But I don't get the feeling some people enjoy it at all,
they seem, in their avoidence, like they are taking castor oil
for their own good!

--
dorayme

Re: printing "sidenotes" in IE6/7

am 29.04.2007 14:54:42 von jkorpela

Scripsit dorayme:

> In article ,
> "Jukka K. Korpela" wrote:
>
>> A table is logically a list of lists
>
> A table certainly contains lists. It may even contain a list of
> lists. But, I am having trouble believing it is (logically) a
> list of lists.

Note that my text continues, after the piece quoted above: "with the
same number of items and with some meaningful relationship across the inner
lists so that the n'th items in inner lists have some connection with each
other".

Thus, a table is _more_ than a list of lists, as explained above. We could
also describe this by saying that a table is a list of lists _in two ways_:
a list of rows, which are lists, and a list of columns, which are lists. But
there's still more: the relationship I mentioned above.

> A list of lists in the sense in which we have become familiar on
> this newsgroup would perhaps be a nested list.

If "nested list" means more than a list of lists, then it means a particular
_rendering_ of such a construct. Apparently, for a table, which is _more_
than a list of lists, namely with relationships across the lists, such
rendering is usually not optimal.

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

Re: printing "sidenotes" in IE6/7

am 30.04.2007 00:48:22 von dorayme

In article <5y0Zh.155715$nv2.31010@reader1.news.saunalahti.fi>,
"Jukka K. Korpela" wrote:

> Scripsit dorayme:
>
> > In article ,
> > "Jukka K. Korpela" wrote:
> >
> >> A table is logically a list of lists
> >
> > A table certainly contains lists. It may even contain a list of
> > lists. But, I am having trouble believing it is (logically) a
> > list of lists.
>
> Note that my text continues, after the piece quoted above: "with the
> same number of items and with some meaningful relationship across the inner
> lists so that the n'th items in inner lists have some connection with each
> other".
>
> Thus, a table is _more_ than a list of lists, as explained above. We could
> also describe this by saying that a table is a list of lists _in two ways_:
> a list of rows, which are lists, and a list of columns, which are lists. But
> there's still more: the relationship I mentioned above.
>

In my post to which you reply, I had hoped to make clear that I
thought that a table, in a logical sense, contains lists. And
that there are relationships between the list items. And that a
table is special in that it does exhibit these relationships. So
far all is agreed. I just think it is a little confusing to
describe the table as being, logically, a list of lists as if
somehow it is a list, the list items being lists. Perhaps it is a
simple terminological query.


> > A list of lists in the sense in which we have become familiar on
> > this newsgroup would perhaps be a nested list.
>
> If "nested list" means more than a list of lists, then it means a particular
> _rendering_ of such a construct. Apparently, for a table, which is _more_
> than a list of lists, namely with relationships across the lists, such
> rendering is usually not optimal.

Perhaps this is what I was worried about and more, I was thinking
that it would be perhaps impossible, not just impractical, to
represent a table as a complex list. But it is a difficult matter
to think through. Certainly little practical hangs on it.

--
dorayme