8000 [css-align-3] Add Melanie's diagrams for vertical writing modes. · w3c/csswg-drafts@f997cf4 · GitHub 7FFF
Skip to content

Commit f997cf4

Browse files
tabatkinstabatkins
committed
[css-align-3] Add Melanie's diagrams for vertical writing modes.
1 parent 0d377ff commit f997cf4

1 file changed

Lines changed: 81 additions & 1 deletion

File tree

‎css-align-3/Overview.bs‎

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -440,7 +440,7 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
440440
alt="Inline-axis 'start' alignment in an LTR container:
441 10BC0 441
Alignment uses the context’s start direction, so
442442
the (RTL) Arabic and Hebrew items
443-
are right-aligned alongside the (LTR) Latin and Chinese.">
443+
are left-aligned alongside the (LTR) Latin and Chinese.">
444444
<img src="images/self-v-context-self-start-tb.svg"
445445
style="background: white; padding: 8px;"
446446
title="inline-axis 'self-start' alignment with LTR context"
@@ -453,6 +453,86 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
453453
</figure>
454454
</aside>
455455

456+
<aside class=example>
457+
The behavior of the alignment keywords is analogous in <a>vertical writing modes</a>:
458+
''<self-position>/start'' and ''<self-position>/end''
459+
are relative to the start/end of the text in the relevant axis.
460+
The ''<self-position>/left'' and ''<self-position>/right'' keywords
461+
are interpreted as <a>line-left</a> and <a>line-right</a>,
462+
relative to the “left” and “right” sides of LTR/RTL text.
463+
464+
<figure>
465+
<img src="images/start-inline-rl.svg"
466+
style="background: white; padding: 8px;"
467+
title="inline-axis 'start' alignment in various writing systems"
468+
alt="Inline-axis 'start' alignment in vertical-rl writing:
469+
Vertical Latin and Chinese are top-aligned,
470+
while Arabic and Hebrew are bottom-aligned.">
471+
<img src="images/end-inline-rl.svg"
472+
style="background: white; padding: 8px;"
473+
title="inline-axis 'end' alignment in various writing systems"
474+
alt="Inline-axis 'end' alignment in vertical-rl writing:
475+
Vertical Latin and Chinese are top-aligned,
476+
while Arabic and Hebrew are bottom-aligned.">
477+
<figcaption>
478+
''<self-position>/start'' vs ''<self-position>/end'' in the <a>inline axis</a>
479+
(<a href="#flexbox-exception">typically<sup>†</sup></a> 'justify-*')
480+
</figcaption>
481+
</figure>
482+
483+
<figure>
484+
<img src="images/left-inline-rl.svg"
485+
style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);"
486+
title="'left' alignment in various writing systems"
487+
alt="Inline-axis 'left' alignment in vertical-rl writing:
488+
Vertical text is top-aligned, regardless of writing system.">
489+
<img src="images/right-inline-rl.svg"
490+
style="background: white; padding: 8px; padding-top: calc(5px + 23px); padding-bottom: 5px;"
491+
title="'right' alignment in various writing systems"
492+
alt="Inline-axis 'right' alignment in vertical-rl writing:
493+
Vertical text is bottom-aligned, regardless of writing system.">
494+
<figcaption>
495+
''<self-position>/left'' vs ''<self-position>/right''
496+
</figcaption>
497+
</figure>
498+
499+
<figure>
500+
<img src="images/start-block-rl.svg"
501+
style="background: white; padding: 8px;"
502+
title="block-axis 'start' alignment in various writing systems"
503+
alt="Block-axis 'start' alignment in vertical-rl writing:
504+
Vertical text is top-aligned in the vertical axis.">
505+
<img src="images/end-block-rl.svg"
506+
style="background: white; padding: 8px;"
507+
title="block-axis 'end' alignment in various writing systems"
508+
alt="Block-axis 'bottom' alignment in vertical-rl writing:
509+
Vertical text is bottom-aligned in the vertical axis.">
510+
<figcaption>
511+
''<self-position>/start'' vs ''<self-position>/end'' in the <a>block axis</a>
512+
(<a href="#flexbox-exception">typically<sup>†</sup></a> 'align-*')
513+
</figcaption>
514+
</figure>
515+
516+
<figure>
517+
<img src="images/self-v-context-start-rl.svg"
518+
style="background: white; padding: 8px; padding-bottom: calc(8px + 30px);"
519+
title="inline-axis 'start' alignment with LTR context"
520+
alt="Inline-axis 'start' alignment in a vertical-rl LTR container:
521+
Alignment uses the context’s start direction, so
522+
the (RTL) Arabic and Hebrew items
523+
are top-aligned alongside the (LTR) Latin and Chinese.">
524+
<img src="images/self-v-context-self-start-rl.svg"
525+
style="background: white; padding: 8px;"
526+
title="inline-axis 'self-start' alignment with LTR context"
527+
alt="Inline-axis 'self-start' alignment in a vertical-rl LTR container:
528+
Horizontal Latin and Chinese items are top-aligned,
529+
while Arabic and Hebrew items are bottom-aligned.">
530+
<figcaption>
531+
''<self-position>/start'' vs ''<self-position>/self-start'' on the individual items
532+
</figcaption>
533+
</figure>
534+
</aside>
535+
456536
<p class='issue'>
457537
Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows.
458538

0 commit comments

Comments
 (0)