- From: Philippe Verdy <verdy_p@wanadoo.fr>
- Date: Wed, 13 May 2015 10:41:49 +0200
- To: www-style@w3.org
- Message-ID: <CAGa7JC0tv=zKYFDkXr+M=BUE2SNPHkkuSF2w+wiJjpa-6T2-Aw@mail.gmail.com>
The suggested default stylesheet for defining the padding gutter needed to display ordered or unnumbered list is currently this: ol:dir(ltr), ul:dir(ltr) { padding-left: 40px; } ol:dir(rtl), ul:dir(rtl) { padding-right: 40px; } This is really bad as it uses a static size that does not work with all font sizes (this value is only valid if the document's default font size is about 13 pixels, producing a correct "3em" padding. But it will break immediately when numbered lists are displayed with much larger fonts (this padding will be insufficient, the marker will be partly truncated (on the left-side if the resolved direction of the ul or ol element is LTR) or not displayed at all, even if its size (for example a bullet) is a standard character inheriting the current font size of <ul> and <ol> lists. Why not definining these default padding values to "3em" ? (letting authors increasing it if they need markers not reduced to a single static character such as a bullet, for example in numbered lists where "3em" could be insufficient to display "123." in a long numbered list). ---- Also is there a way to have this padding computed according to the maximum display width of all markers in the same list (the most direct ul or ol parent element containing the list item for which markers will be displayed), plus the marker relative position from the list-item border box, plus an additional offset? In that case, the default padding would be computed using the suggested offset of 1.25em and the suggested relative position of the marker set also to 1.25em (assuming that the marker's width is about 0.5em (for example when it is just a bullet with usual builtin fonts used for default markers like bullets, square, circle...), this also gives a total of 3em of total padding in these fonts. So we would write something like: ol:dir(ltr), ul:dir(ltr) { padding-left: size( ::marker::position::computed-width(px) * 2 + max(foreach($(>li), ::counterbox::computed-width(px)), px ); } ol:dir(rtl), ul:dir(rtl) { padding-right: size( ::marker::position::computed-width(px) * 2 + max(foreach($(>li), ::counterbox::computed-width(px)), px ); } (Such computing first requires computing all the counter values (for all list items that have a visible box) by first resolving their counter id, their internal numeric value, the counter styles (including converted numbers in decimal, roman, alphabets, plus their static text such as punctuation), in order to determine their string value, then resolve their effective font in order to get their individual display width; if the marker is an image, we just use the effective width of the image. ---- But because markers may be styled differently, their size could use different measurement units, so we need to specify a conversion unit when retrieving their width, so that the the list of widths will use the same unit (otherwise max() would have no real meaning, unless it can process size measurements in compatible and convertible units, in which case it will convert all widths to the measurement unit of the first item in the list to compute the maximum size; in such a a case the unit parameters (px) may be dropped above, and we don't need a constructor such as "size(number, px)" to convert a numeric value to a valid size type: ol:dir(ltr), ul:dir(ltr) { padding-left: ( (::marker::position::computed-width) * 2 + max(foreach($(>li), ::counterbox::computed-width) ); } ol:dir(rtl), ul:dir(rtl) { padding-right: ( (::marker::position::computed-width) * 2 + max(foreach($(>li), ::counterbox::computed-width) ); }} Note that this syntax also assumes that basic arithmeric also works by converting implicitly the size-type operands to the unit of the first operand, and then return the computed value in that type. But browsers could also convert all these to an internal measurement unit (such as device-specific physical pixels) to avoid rounding problems in the arithmetic above ("*2", and "+") The syntax above also supposes that it is possible to perform DOM queries by specifying CSS selectors with "$()" above, using a syntax similar to jQuery, in order to enumerate "li" child elements of "ol" or "ul" elements. The "$()" means actually the same in this example as querying direct children of the currently styled element, with a filter (the filter here is ">li"). It also assumes that there's an API in CSS to query CSS properties of DOM-selected elements (such as "::marker", "::computed-width"). This API computing starts by expressions between parentheses here.
Received on Wednesday, 13 May 2015 08:42:37 UTC