- From: MURAKAMI Shinyu <murakami@antenna.co.jp>
- Date: Mon, 27 Sep 2010 15:35:31 +0900
- To: "www-style@w3.org" <www-style@w3.org>
I have yet another logical property and writing mode proposal. Logical Properties ================== Borrowing from fantasai's suggestion: http://lists.w3.org/Archives/Public/www-style/2006Jun/0084.html ... | Shorthands: | | margin: [physical?|logical] <margin-width>{1,4} | | <margin-width>{1,4} [physical?|logical] | | [physical?|logical] is a flag that determines whether the values should be | assigned to top/right/bottom/left or before/start/after/end. Since 'physical' | is the default interpretation, the flag may be omitted | | Examples: ... | margin: logical 1em 0em 1.5em 3em; /* before = 1em, end = 0em, | after = 1.5em, start = 3em */ If the [physical?|logical] flag can be specified also on non-shorthand properties, we can treat existing properties as logical properties and can avoid adding new properties such as margin-start, margin-end etc. and also can avoid the cascading problem. Example: margin: logical 1em 0em 1.5em 3em; is equivalent to margin-top: logical 1em; /* margin before */ margin-right: logical 0em; /* margin end */ margin-bottom: logical 1.5em; /* margin after */ margin-left: logical 3em; /* margin start */ Another shorthand example: border-radius: logical 2em 1em 4em / 0.5em 3em; is equivalent to border-top-left-radius: logical 2em 0.5em; /* before-start */ border-top-right-radius: logical 1em 3em; /* before-end */ border-bottom-right-radius: logical 4em 0.5em; /* after-end */ border-bottom-left-radius: logical 1em 3em; /* after-start */ Other examples: width: logical 100%; /* logical width = physical height in vertical writing mode */ top: logical 3cm; /* physical right in vertical-rl mode */ background-repeat: logical repeat-x; /* repeat vertically in vertical writing mode */ text-align: logical left; /* = start = right in RTL mode */ caption-side: logical top; border-spacing: logical 2px 5px; If physical and logical specifications are in conflict, the physical one wins: /* in RTL mode, */ margin-right: 3em; margin-left: logical 2em; /* = margin start = margin right in RTL mode */ /* margin-right: 3em (physical) wins over 2em (logical) */ The UA default style for list indentation supporting all writing modes can be defined as: ol, ul, dd { margin-left: logical 40px } Logical Writing Modes ===================== writing-mode: logical? && [horizontal-tb | vertical-rl | vertical-lr | horizontal-bt] If the writing-mode value has the 'logical' flag, other properties that can have 'logical' flag are set to 'logical' implicitly unless 'physical' flag is specified. Examples: writing-mode: logical vertical-rl; /* left is physical top, top is physical right */ writing-mode: logical vertical-lr; /* left is physical top, top is physical left */ writing-mode: logical horizontal-tb; /* left is physical right in RTL mode */ -- MURAKAMI Shinyu http://twitter.com/MurakamiShinyu Antenna House Formatter: http://www.antennahouse.com
Received on Monday, 27 September 2010 06:36:37 UTC