Re: [css-writing-modes] Propose writing-mode: sideways-left

On Tue, Jul 14, 2015 at 10:10 PM, Richard Ishida <ishida@w3.org> wrote:

> On 13/07/2015 13:38, Koji Ishii wrote:
>
>>     [Actually, the setting of the top of the three boxes containing text
>>     is set at a regular offset from one line to the next, which makes me
>>     think this is 3 separate boxes with text aligned towards the top of
>>     the page. So with this proposal, i think you'd have to have
>>       writing-mode: sideways-lr; text-align: end;
>>     set on the box containing Latin.]
>>
>>
>> Sorry, I don't follow this part. What is the "top of the three boxes"?
>>
>
> sorry, yes that was a bit cryptic. I was referring to the picture at
> https://www.flickr.com/photos/ishida/19391039009/
> ignore that, and see below.
>
> so if we have an embedded run of text in a line of vertical CJKM text and
> we set the CSS for that embedded run as writing-mode: sideways-lr, what
> happens when the height of the window shrinks and the text tries to wrap?
> Suppose for example you have a vertical line styled as follows:
>
> p { writing-mode:vertical-rl; }
> span { writing-mode:sideways-lr; }
>
> <p>国际化活动、<span>Latin text</span>万维网联盟</p>
>
> if all that fits on one line, we'd see the chinese characters upright
> running down the line and the latin text running up the line with the tops
> of the letters to the left.
>
> if the line length is reduced by resizing the window, so that the line
> break will occur between 'Latin' and 'text', what will we see? I'm assuming
> the browser won't try to create another line to the right of the initial
> chinese text, even though writing-mode is at that point set to lr - ie. the
> line layout direction of the p overrides that of the span. Is that right?
>
> If so, given that we expect to have the first bit of chinese in the
> original line position, and the second in a new line to its left, will the
> word 'Latin' be in the original line or the left-hand one?


Spec-wise, the paragraph after Example 4[1] defines that:

| If a box has a different block flow direction than its containing block:
| * If the box has a specified display of inline, its display computes to
inline-block.

So the <span> is an inline-block. When the window gets smaller, it should
behave just like an inline-block in horizontal flow; e.g., [2]. If I apply
the rule to your example, I think it'd look like:

| 国际化活动、(CJK before Latin)
| Latin text (this should look upside down)
| 万维网联盟 (CJK after Latin)

then if you make it even smaller:

| 国际化活动、(CJK before Latin)
| text (this should look upside down)
| Latin (this should look upside down)
| 万维网联盟 (CJK after Latin)

[1] http://dev.w3.org/csswg/css-writing-modes-3/#propdef-writing-mode
[2] http://jsbin.com/rogukus/edit?html,output

/koji