W3C home > Mailing lists > Public > www-style@w3.org > June 2010

RE: [css3-text-layout] "design philosophy" or "basic idea" how vertical writing would work in CSS

From: Ishii Koji <kojiishi@gluesoft.co.jp>
Date: Mon, 28 Jun 2010 22:11:06 -0400
To: fantasai <fantasai.lists@inkedblade.net>
CC: "www-style@w3.org" <www-style@w3.org>
Message-ID: <A592E245B36A8949BDB0A302B375FB4E09E9A91B40@MAILR001.mail.lan>
Thank you, fantasai. I think I finally understand what you are trying to do. And I completely agree that the plan will be one of the consistent resolution. Allow me to say thank you for your efforts to help me understand.

Well, you may hate to hear this, I apologize in advance, but isn't it still easier to add just a single property that transforms the way left/right/top/bottom/width/height are interpreted?

I know little about CSS so you'd be better one to figure out what syntax would be the best to be consistent with other part of CSS, but to give you the idea of the proposal, here are some candidates.

ltrbwh-mode: page|logical
ltrbwh-to: page|flow
transform-ltrbwh: rotate(90deg)

I think this is basically the same as what you're trying to do. But instead of adding properties for logical and page, it just switches the mode within the block.

I have to admit that, whatever route we'll take, there will be different issues. That applies to my proposal too. But I'm pretty certain that this route saves a lot of work from you guys here, from browser developers, and from web designers.

It is a little different kind, but provides another consistency because it is declared explicitly. You may still feel a little strange or shame to use wrong terminologies, but I think there are examples in the real world where people keep using ancient terminologies for different kind of things because of historical reasons. I can't find many examples in English, but one example is, the left side of airplanes is called "port side". It came from ships, and there's no port for airplanes, but people didn't rename it to "airport side". This is a guess, but people thought it's more familiar and is easier to use. Well, this may not be a good example, but I hope you get the idea.

Note that, because this is a mode, you can't mix the two in a single block, and this could be an issue in some scenarios. In your plan, one could write:
<div style="margin-top:10px; padding-before:5px;">
But this has to be re-written to:
<div style="margin-top:10px">
<div style="ltrbwh-mode:logical; padding-top:5px;">
Which is a little lengthy.

But adding a mode would be much simpler in most cases I think than adding variations to all directional properties. Web designers can re-use most part of the existing documents. Browser developers can add one property to the block structure. Well, someone in this ML or in W3C must go through all properties either way to see if there were issues, that doesn't change, but the number of issues will be a lot less because most of them will be automatically changed by the mode.

After reading your answer, and after writing this, I figured out that your plan and my proposal are actually very close. Both wanted to provide a way to change the meaning of directional properties. It's just different in where you want to resolve by adding separate properties, while I prefer adding a mode. I'm very glad to know that we share the basic idea, and I appreciate again for your efforts to bring me up to this level of the understanding.

Now I'm fine with your plan, as it resolves what I really need, but I just wanted to test an idea that may be able to resolve with less efforts.

What do you think? Do I still miss something more important?

Koji Ishii

-----Original Message-----
From: fantasai [mailto:fantasai.lists@inkedblade.net] 
Sent: Tuesday, June 29, 2010 4:02 AM
To: Ishii Koji
Cc: www-style@w3.org
Subject: Re: [css3-text-layout] "design philosophy" or "basic idea" how vertical writing would work in CSS

On 06/28/2010 02:10 AM, Ishii Koji wrote:
> Fantasai, thank you for the reply, and I think I've got much better 
> understanding of what you said. Also thank you again for the link to 
> the CSS3 box module. I didn't know about that.
> Please allow me to ask a few more questions. Sorry I'm slow to understand.
> 1. So the plan is not about margins and paddings, but to make all 
> left/right/top/ bottom are against page, and add 
> start/end/before/after properties to all existing properties, like border-* and position:*. Is this correct?

That's the current thinking, although there seems to be some resistance to adding new properties for this. In any case, left/right/top/bottom will be relative to the page, yes.

> 2. Regardless of the flow, width is horizontal length, and height is vertical
>    length. Is this correct?

This one I am not 100% sure. If we go the start/end/before/after route (which is what XSL:FO did), then we'll want a physical width and height as well as a logical width and height. But I can't come up with reasonable names. :/ Multi-column Layout uses 'column-width' and 'column-length' as logical names, so we may end up with e.g. 'width' and 'length' for logical measurements to be consistent with that, and then 'height' and something else for physical ones. I am not sure.

> 3. There might be some exceptions to the rule 2 though, like line-height. Or
>    are you also adding line-width property?

Correct. line-height and vertical-align will rotate. Most properties that control layout within a line of text will be reused. Note that the "top" of the line does not necessarily correspond with the "top" (before edge) of the block: in Mongolian layout, the "top" of the line and the "top" of the paragraph are opposite directions.

> 4. All existing CSS 2 documents must be converted to start/end/before/after to
>    make them usable for vertical flow. Is this correct?

Yes, CSS2 documents used in vertical flow will either need to be re-authored for vertical flow, or, if we add start/end/before/after, then converted to those.

Received on Tuesday, 29 June 2010 02:11:43 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:28 GMT