- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Sat, 15 Mar 2008 19:03:30 -0700
- To: Ben Cotterell <ben.cotterell@antplc.com>
- CC: www-style@w3.org
Ben Cotterell wrote:
> On Thu, Mar 13, 2008 at 08:07:03PM -0700, Andrew Fedoniouk wrote:
>> I propose to add :ltr and :rtl pseudo classes to the Selector module.
>>
>> These classes reflect value of nearest element with defined @dir
>> attribute in child/parent chain of the element.
>>
>> So if someone will define:
>> <body dir=rtl>
>> ...
>> <ul dir=ltr>
>> <li>Some text</li>
>> </ul>
>> </body>
>>
>> then li element here can be styled appropriately:
>>
>> li:rtl { padding-left: 0; padding-right: 10px;}
>> li:ltr { padding-left: 10px; padding-right: 0;}
>
> That's basically how we did it in ANT Galio, although we put the margin
> on the ul, as per CSS 2.1 Appendix D.
>
> ul { margin-left: 40px }
> ul:rtl { margin-right: 40px }
>
> since you really do need to move the margin to the right for rtl or
> nested lists won't indent and bullets will be off the screen.
That was just an example to demonstrate the problem.
If to speak about ul styling... IE is using margins.
Mozilla appears as using ul{padding-left/right} rather than ul{margin}.
In some cases Mozilla's approach is better.
>
> [...]
>> Or is there a better (e.g. more generic) way of achieving this?
>
> Another way of doing this kind of thing is to have more properties
> called margin-start, margin-end, etc., where start means "left if ltr,
> right if rtl".
>
> Not sure which is better.
>
margin-start/end solve only part of the problem.
What about image positions, borders and almost all other
visual attributes?
ul { background-position: 100% 100%; }
ul:rtl { background-position: 0 100%; }
--
Andrew Fedoniouk.
http://terrainformatica.com
Received on Sunday, 16 March 2008 02:04:07 UTC