Re: [css3-lists] padding-left on <ol> and <ul> elements

Le 2014-02-22 05:31, Jonathan Kew a écrit :
> In http://www.w3.org/TR/css3-lists/#html4, we have
> 
>   /* Box Model Rules */
>   ol, ul {
> display: block;
> margin: 1em 0;
> padding-left: 40px;
>   }
> 
> which results in a fixed padding-left, whereas other dimensions (e.g.
> the margin here, as well as that on li::marker later) are expressed
> using 'em', so that they scale with font size.
> 
> As a result, an example like:
> 
> data:text/html,
>   <div style="font-size:16px"><ol><li>one<li>two<li>three</div>
>   <div style="font-size:32px"><ol><li>one<li>two<li>three</div>
>   <div style="font-size:48px"><ol><li>one<li>two<li>three</div>
> 
> looks pretty silly (in both Chrome and Firefox, for instance): the
> text of the list items stays lined up, but the markers begin to get
> pushed out of view to the left of the window.
> 
> If the padding-left were defined as 2.5em instead of 40px:
> 
> data:text/html,<style>ol{padding-left:2.5em}</style>
>   <div style="font-size:16px"><ol><li>one<li>two<li>three</div>
>   <div style="font-size:32px"><ol><li>one<li>two<li>three</div>
>   <div style="font-size:48px"><ol><li>one<li>two<li>three</div>
> 
> we get a rendering that scales in a more natural and expected way
> (IMO) in response to font size changes.


Jonathan,

I fully agree with your 2.5em suggestion. Many CSS2.1 tests have 
originally been causing the layout annoyance (pushed out of view to the 
left of the window) you described, exactly because padding-left was not 
defined with relative units, scaling with font-size.


> This can of course be modified by an author (as above), but ISTM that
> a change to the default UA stylesheet would result in better default
> behavior for naive content. Is there any possibility we could make
> such a change, or is it likely it would break too many things?
> 
> JK

Browser manufacturers used to have incompatible default list styling.

Consistent List Indentation: Finding Consistency
http://mdn.beonex.com/en/Consistent_List_Indentation.html#Finding_Consistency

Nowadays, Firefox uses a 40px padding-start-value on lists (ul, ol), 
IE9+ uses a 30pt padding-left on lists, Chrome uses a 40px 
-webkit-padding-start.

Gérard

Received on Saturday, 22 February 2014 14:09:55 UTC