- From: Matthew Brealey <thelawnet@yahoo.com>
- Date: Fri, 04 Feb 2000 14:28:59 -0800
- To: www-style@w3.org
- Message-ID: <389B52AB.5B30@yahoo.com>
<Q> Note that the :first-letter pseudo-element tags abut the content (i.e., the initial character), </Q> abut? <Q> In order to achieve traditional drop caps formatting, user agents may approximate font sizes, for example to align baselines. Also, the glyph outline may be taken into account when formatting. </Q> This paragraph is hopelessly vague. How does a UA know when the user wants baselines to be aligned? - more often it is the tops of glyphs that should be aligned. Such a statement would be useful, but to be so it should be specified in far more detail - there certainly are very serious issues relating to drop caps; for example, if I want to dropcap a T, if I know the height and width of the T glyph in the users font, then I can make my drop cap look good, but if I don't and I specify the appropriate height/line-height (it makes no difference which is used) and width appropriate for the fonts on _my_ computer, then I risk ugly overlap. For example, at Arial in a P element with 21-pixel line height and 16-pixel font size, these are the 'correct' values for 3-line top-ascender and bottom-baseline alignment. font-size: 76px; margin-top: 7px; line-height: 56px; width: 46px whereas if the user insists on Comic Sans MS, these are the 'correct' values: font-size: 76px; line-height: 43px; /* If this were 1 pixel less, it wouldn't span three lines! */ width: 54px A set of settings designed for one font would make the other look horrendous (If you're wondering why I don't use ems, it's because of Win IE's inadequate rounding routines (other browsers seem to have cognate problems, but IE is worst) - it uses different rounding routines for ems and exes as against <number> (i.e., on line-height); in the first two cases it drops all decimal places after the first (not terribly helpful when this kind of precision is needed) and in the latter it at least uses a valid (although much too imprecise) rounding method, rounding to the nearest decimal place in time-honoured fashion [there are some people who would have you round to the even digit, but I digress], rounding .05 up, b). On which subject, the code at the :first-letter example is wrong (not so much the code (except from the width omission (which was pointed out before)) as the example that purports to be a rendering of it; however, the example is useful, the code is not): P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase } (Incidentally, on the use of points - please can we not have any examples using points in CSS 3 - it only encourages people.) This would result in the first letter overlapping with the text below it because the height of the drop cap box is 12 points, which is less than or equal to the height of the line box (to span n lines, Height of n-1 lines < Height of float box <= Height of n lines). To obtain the correct appearance, the height of the P:first-letter must exceed that of one line box but be less than or equal to that of two, so add line-height: 13pt (or the pixel equivalent - usually 17px) (it is inappropriate to use scaling factors to set the line height of floated bactors) to the P:first-letter to make it correct. There are in fact four or possibly five things that one must always set on dropcaps: 1. width - depends on the font - ALWAYS UNKNOWN ON THE WWW 2. float 3. line-height - depends on the font - ALWAYS UNKNOWN ON THE WWW 4. margin-top (sometimes) - depends on the font - ALWAYS UNKNOWN ON THE WWW 5. font-size - depends on the font - ALWAYS UNKNOWN ON THE WWW
Received on Friday, 4 February 2000 09:27:26 UTC