Skip to content

Commit 7e29a7b

Browse files
fantasaifantasai
committed
[css-writing-modes] Improve intro & cross-linking
1 parent 99208dc commit 7e29a7b

File tree

2 files changed

+94
-65
lines changed

2 files changed

+94
-65
lines changed

‎css-writing-modes-3/Overview.bs‎

Lines changed: 47 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -65,23 +65,31 @@ Introduction to Writing Modes</h2>
6565
<div class="figure right">
6666
<a href="diagrams/text-flow-vectors-tb.svg">
6767
<img src="diagrams/text-flow-vectors-tb.png" class="landscape"
68-
alt="Latin-based writing mode"></a>
68+
alt="Text flowing left to right,
69+
Latin glyphs set upright,
70+
and lines stacked top to bottom"></a>
6971
<p class="caption">Latin-based writing mode
7072
</div>
7173
<div class="figure left">
7274
<a href="diagrams/text-flow-vectors-lr-reverse.svg">
7375
<img src="diagrams/text-flow-vectors-lr-reverse.png" class="landscape"
74-
alt="Mongolian-based writing mode"></a>
76+
alt="Text flowing top to bottom,
77+
Latin glyphs tipped sideways to the right (rotated 90&deg; clockwise),
78+
and lines stacked left to right"></a>
7579
<p class="caption">Mongolian-based writing mode
7680
</div>
7781
<div class="figure right">
7882
<a href="diagrams/text-flow-vectors-tb.svg">
7983
<img src="diagrams/text-flow-vectors-tb.png" class="landscape"
80-
alt="Han-based writing mode"></a>
84+
alt="Text flowing left to right,
85+
Latin glyphs set upright,
86+
and lines stacked top to bottom"></a>
8187
<a href="diagrams/text-flow-vectors-rl.svg">
8288
<img src="diagrams/text-flow-vectors-rl.png" class="landscape"
83-
alt="Han-based writing mode"></a>
84-
<p class="caption">Han-based writing mode
89+
alt="Text flowing top to bottom,
90+
Latin glyphs tipped sideways to the right (rotated 90&deg; clockwise),
91+
and lines stacked right to left"></a>
92+
<p class="caption">Han-based writing modes
8593
</div>
8694
</div>
8795

@@ -97,23 +105,6 @@ Introduction to Writing Modes</h2>
97105
within a block container. The 'writing-mode' property determines the
98106
block flow direction.</p>
99107

100-
<p>The <dfn export>typographic mode</dfn> determines if text should apply
101-
typographic conventions specific to vertical flow for <a>vertical
102-
scripts</a>.
103-
This concept distinguishes vertical flow for <a>vertical scripts</a> from
104-
rotated horizontal flow.
105-
106-
<p>A <dfn export>horizontal writing mode</dfn> is one with horizontal lines of
107-
text, i.e. a downward or upward block flow.
108-
A <dfn export>vertical writing mode</dfn> is one with vertical lines of text,
109-
i.e. a leftward or rightward block flow.
110-
111-
<p class="note">These terms should not be confused with
112-
<dfn noexport>vertical block flow</dfn> (which is a downward or
113-
upward block flow) and <dfn noexport>horizontal block flow</dfn> (which is
114-
leftward or rightward block flow). To avoid confusion, CSS
115-
specifications avoid this latter set of terms.</p>
116-
117108
<p>Writing systems typically have one or two native writing modes. Some
118109
examples are:
119110
<ul>
@@ -130,8 +121,33 @@ Introduction to Writing Modes</h2>
130121
modes on the same page.
131122
</ul>
132123

124+
<p>A <dfn export>horizontal writing mode</dfn>
125+
is one with horizontal lines of text,
126+
i.e. a downward or upward block flow.
127+
A <dfn export>vertical writing mode</dfn>
128+
is one with vertical lines of text,
129+
i.e. a leftward or rightward block flow.
130+
131+
<p class="note">These terms should not be confused with
132+
<dfn noexport>vertical block flow</dfn>
133+
(which is a downward or upward block flow)
134+
and <dfn noexport>horizontal block flow</dfn>
135+
(which is leftward or rightward block flow).
136+
To avoid confusion, CSS specifications avoid this latter set of terms.
137+
138+
<p>The <dfn export>typographic mode</dfn> determines whether to use
139+
typographic conventions specific to vertical flow for <a>vertical scripts</a>
140+
(<dfn export>vertical typographic mode</dfn>)
141+
or to use the typographic conventions of [=horizontal writing modes=]
142+
(<dfn export>horizontal typographic mode</dfn>).
143+
This concept distinguishes vertical typesetting
144+
from rotated horizontal typesetting.
145+
133146
<p>The 'text-orientation' component of the writing mode
134-
controls the <a>glyph orientation</a>.
147+
controls the <a>glyph orientation</a>
148+
in [=vertical typographic modes=],
149+
dictating whether a particular [=typographic character unit=]
150+
is [=typeset upright=] or [=typeset sideways=].
135151

136152
<p class="note">See Unicode Technical Note #22 [[UTN22]]
137153
(<a href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML version</a>)
@@ -1214,14 +1230,13 @@ Orienting Text: the 'text-orientation' property</h3>
12141230

12151231
<p>This property specifies the orientation of text within a line.
12161232
Current values only have an effect in vertical <a>typographic modes</a>:
1217-
the property has no effect on boxes in horizontal <a>typographic modes</a>.
1233+
the property has no effect in horizontal <a>typographic modes</a>.
12181234

12191235
<p>Values have the following meanings:</p>
12201236

12211237
<dl dfn-for=text-orientation dfn-type=value>
12221238
<dt><dfn>mixed</dfn></dt>
1223-
<dd><p>In vertical writing modes,
1224-
<a>typographic character units</a> from horizontal-only scripts
1239+
<dd><p><a>Typographic character units</a> from horizontal-only scripts
12251240
are <a href="#typeset-sideways">typeset sideways</a>,
12261241
i.e. 90&deg; clockwise from their standard orientation in horizontal text.
12271242
<a>Typographic character units</a> from vertical scripts
@@ -1230,8 +1245,7 @@ Orienting Text: the 'text-orientation' property</h3>
12301245
<p>This value is typical for layout of dominantly vertical-script text.
12311246

12321247
<dt><dfn>upright</dfn></dt>
1233-
<dd><p>In vertical writing modes,
1234-
<a>typographic character units</a> from horizontal-only scripts
1248+
<dd><p><a>Typographic character units</a> from horizontal-only scripts
12351249
are <a href="#typeset-upright">typeset upright</a>,
12361250
i.e. in their standard horizontal orientation.
12371251
<a>Typographic character units</a> from vertical scripts
@@ -1249,8 +1263,7 @@ Orienting Text: the 'text-orientation' property</h3>
12491263
where this directional override does not apply.
12501264

12511265
<dt><dfn>sideways</dfn></dt>
1252-
<dd><p>In vertical writing modes,
1253-
this causes all text to be <a href="#typeset-sideways">typeset sideways</a>,
1266+
<dd><p>Causes all text to be <a href="#typeset-sideways">typeset sideways</a>,
12541267
as if in a horizontal layout, but rotated 90&deg; clockwise.
12551268
</dl>
12561269

@@ -1311,7 +1324,7 @@ Vertical Typesetting and Font Features</h4>
13111324
text is typeset either “upright” or “sideways” as defined below:
13121325

13131326
<dl>
1314-
<dt><dfn id='typeset-upright' local-lt='upright' export>upright typesetting</dfn>
1327+
<dt><dfn id='typeset-upright' lt="typeset upright | upright typesetting | typesetting upright" local-lt='upright' export>upright typesetting</dfn>
13151328
<dd>
13161329
<a>Typographic character units</a> are individually typeset upright
13171330
in vertical lines with vertical font metrics.
@@ -1344,7 +1357,7 @@ Vertical Typesetting and Font Features</h4>
13441357
the UA <em>may wish to</em> [[!RFC6919]] (but is not expected to)
13451358
synthesize the missing glyphs by <a href="#typeset-sideways">typesetting them sideways</a> etc.
13461359

1347-
<dt><dfn id='typeset-sideways' local-lt='sideways' export>sideways typesetting
1360+
<dt><dfn id='typeset-sideways' lt="typeset sideways | sideways typesetting | typesetting sideways" local-lt='sideways' export>sideways typesetting
13481361
<dd>
13491362
<a>Typographic character units</a> typeset as a run
13501363
rotated 90&deg; clockwise from their upright orientation,
@@ -2342,7 +2355,7 @@ Horizontal-in-Vertical Composition: the 'text-combine-upright' property</h3>
23422355
Name: text-combine-upright
23432356
Value: none | all
23442357
Initial: none
2345-
Applies to: [=inline elements=] and text
2358+
Applies to: [=inline boxes=] and text
23462359
Inherited: yes
23472360
Percentages: n/a
23482361
Computed value: specified keyword
@@ -2527,6 +2540,7 @@ Privacy and Security Considerations {#priv-sec}
25272540
(<a href="https://github.com/w3c/csswg-drafts/issues/3779">Issue 3779</a>)
25282541
<li>Updated “Applies to” line for 'text-combine-upright' to mention text
25292542
(since certain effects like ''display: contents'' can strip the box itself).
2543+
<li>Reshuffled text in the [[#intro]] and improved cross-linking.
25302544
</ul>
25312545

25322546
<h2 class="no-num" id="acknowledgements">

‎css-writing-modes-4/Overview.bs‎

Lines changed: 47 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -68,23 +68,31 @@ Introduction to Writing Modes</h2>
6868
<div class="figure right">
6969
<a href="diagrams/text-flow-vectors-tb.svg">
7070
<img src="diagrams/text-flow-vectors-tb.png" class="landscape"
71-
alt="Latin-based writing mode"></a>
71+
alt="Text flowing left to right,
72+
Latin glyphs set upright,
73+
and lines stacked top to bottom"></a>
7274
<p class="caption">Latin-based writing mode
7375
</div>
7476
<div class="figure left">
7577
<a href="diagrams/text-flow-vectors-lr-reverse.svg">
7678
<img src="diagrams/text-flow-vectors-lr-reverse.png" class="landscape"
77-
alt="Mongolian-based writing mode"></a>
79+
alt="Text flowing top to bottom,
80+
Latin glyphs tipped sideways to the right (rotated 90&deg; clockwise),
81+
and lines stacked left to right"></a>
7882
<p class="caption">Mongolian-based writing mode
7983
</div>
8084
<div class="figure right">
8185
<a href="diagrams/text-flow-vectors-tb.svg">
8286
<img src="diagrams/text-flow-vectors-tb.png" class="landscape"
83-
alt="Han-based writing mode"></a>
87+
alt="Text flowing left to right,
88+
Latin glyphs set upright,
89+
and lines stacked top to bottom"></a>
8490
<a href="diagrams/text-flow-vectors-rl.svg">
8591
<img src="diagrams/text-flow-vectors-rl.png" class="landscape"
86-
alt="Han-based writing mode"></a>
87-
<p class="caption">Han-based writing mode
92+
alt="Text flowing top to bottom,
93+
Latin glyphs tipped sideways to the right (rotated 90&deg; clockwise),
94+
and lines stacked right to left"></a>
95+
<p class="caption">Han-based writing modes
8896
</div>
8997
</div>
9098

@@ -100,23 +108,6 @@ Introduction to Writing Modes</h2>
100108
within a block container. The 'writing-mode' property determines the
101109
block flow direction.</p>
102110

103-
<p>The <dfn export>typographic mode</dfn> determines if text should apply
104-
typographic conventions specific to vertical flow for <a>vertical
105-
scripts</a>.
106-
This concept distinguishes vertical flow for <a>vertical scripts</a> from
107-
rotated horizontal flow.
108-
109-
<p>A <dfn export>horizontal writing mode</dfn> is one with horizontal lines of
110-
text, i.e. a downward or upward block flow.
111-
A <dfn export>vertical writing mode</dfn> is one with vertical lines of text,
112-
i.e. a leftward or rightward block flow.
113-
114-
<p class="note">These terms should not be confused with
115-
<dfn noexport>vertical block flow</dfn> (which is a downward or
116-
upward block flow) and <dfn noexport>horizontal block flow</dfn> (which is
117-
leftward or rightward block flow). To avoid confusion, CSS
118-
specifications avoid this latter set of terms.</p>
119-
120111
<p>Writing systems typically have one or two native writing modes. Some
121112
examples are:
122113
<ul>
@@ -133,8 +124,33 @@ Introduction to Writing Modes</h2>
133124
modes on the same page.
134125
</ul>
135126

127+
<p>A <dfn export>horizontal writing mode</dfn>
128+
is one with horizontal lines of text,
129+
i.e. a downward or upward block flow.
130+
A <dfn export>vertical writing mode</dfn>
131+
is one with vertical lines of text,
132+
i.e. a leftward or rightward block flow.
133+
134+
<p class="note">These terms should not be confused with
135+
<dfn noexport>vertical block flow</dfn>
136+
(which is a downward or upward block flow)
137+
and <dfn noexport>horizontal block flow</dfn>
138+
(which is leftward or rightward block flow).
139+
To avoid confusion, CSS specifications avoid this latter set of terms.
140+
141+
<p>The <dfn export>typographic mode</dfn> determines whether to use
142+
typographic conventions specific to vertical flow for <a>vertical scripts</a>
143+
(<dfn export>vertical typographic mode</dfn>)
144+
or to use the typographic conventions of [=horizontal writing modes=]
145+
(<dfn export>horizontal typographic mode</dfn>).
146+
This concept distinguishes vertical typesetting
147+
from rotated horizontal typesetting.
148+
136149
<p>The 'text-orientation' component of the writing mode
137-
controls the <a>glyph orientation</a>.
150+
controls the <a>glyph orientation</a>
151+
in [=vertical typographic modes=],
152+
dictating whether a particular [=typographic character unit=]
153+
is [=typeset upright=] or [=typeset sideways=].
138154

139155
<p class="note">See Unicode Technical Note #22 [[UTN22]]
140156
(<a href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML version</a>)
@@ -1292,14 +1308,13 @@ Orienting Text: the 'text-orientation' property</h3>
12921308

12931309
<p>This property specifies the orientation of text within a line.
12941310
Current values only have an effect in vertical <a>typographic modes</a>:
1295-
the property has no effect on boxes in horizontal <a>typographic modes</a>.
1311+
the property has no effect in horizontal <a>typographic modes</a>.
12961312

12971313
<p>Values have the following meanings:</p>
12981314

12991315
<dl dfn-for=text-orientation dfn-type=value>
13001316
<dt><dfn>mixed</dfn></dt>
1301-
<dd><p>In vertical writing modes,
1302-
<a>typographic character units</a> from horizontal-only scripts
1317+
<dd><p><a>Typographic character units</a> from horizontal-only scripts
13031318
are <a href="#typeset-sideways">typeset sideways</a>,
13041319
i.e. 90&deg; clockwise from their standard orientation in horizontal text.
13051320
<a>Typographic character units</a> from vertical scripts
@@ -1308,8 +1323,7 @@ Orienting Text: the 'text-orientation' property</h3>
13081323
<p>This value is typical for layout of dominantly vertical-script text.
13091324

13101325
<dt><dfn>upright</dfn></dt>
1311-
<dd><p>In vertical writing modes,
1312-
<a>typographic character units</a> from horizontal-only scripts
1326+
<dd><p><a>Typographic character units</a> from horizontal-only scripts
13131327
are <a href="#typeset-upright">typeset upright</a>,
13141328
i.e. in their standard horizontal orientation.
13151329
<a>Typographic character units</a> from vertical scripts
@@ -1327,8 +1341,7 @@ Orienting Text: the 'text-orientation' property</h3>
13271341
where this directional override does not apply.
13281342

13291343
<dt><dfn>sideways</dfn></dt>
1330-
<dd><p>In vertical writing modes,
1331-
this causes all text to be <a href="#typeset-sideways">typeset sideways</a>,
1344+
<dd><p>Causes all text to be <a href="#typeset-sideways">typeset sideways</a>,
13321345
as if in a horizontal layout, but rotated 90&deg; clockwise.
13331346
</dl>
13341347

@@ -1389,7 +1402,7 @@ Vertical Typesetting and Font Features</h4>
13891402
text is typeset either “upright” or “sideways” as defined below:
13901403

13911404
<dl>
1392-
<dt><dfn id='typeset-upright' local-lt='upright' export>upright typesetting</dfn>
1405+
<dt><dfn id='typeset-upright' lt="typeset upright | upright typesetting | typesetting upright" local-lt='upright' export>upright typesetting</dfn>
13931406
<dd>
13941407
<a>Typographic character units</a> are individually typeset upright
13951408
in vertical lines with vertical font metrics.
@@ -1422,7 +1435,7 @@ Vertical Typesetting and Font Features</h4>
14221435
the UA <em>may wish to</em> [[!RFC6919]] (but is not expected to)
14231436
synthesize the missing glyphs by <a href="#typeset-sideways">typesetting them sideways</a> etc.
14241437

1425-
<dt><dfn id='typeset-sideways' local-lt='sideways' export>sideways typesetting
1438+
<dt><dfn id='typeset-sideways' lt="typeset sideways | sideways typesetting | typesetting sideways" local-lt='sideways' export>sideways typesetting
14261439
<dd>
14271440
<a>Typographic character units</a> typeset as a run
14281441
rotated 90&deg; clockwise from their upright orientation,
@@ -2806,6 +2819,8 @@ Changes since the <a href="https://www.w3.org/TR/2019/CR-css-writing-modes-4-201
28062819
<li>
28072820
Clarified that the [=central baseline=] is the [=ideographic central baseline=].
28082821
(<a href="https://github.com/w3c/csswg-drafts/issues/5177">Issue 5177</a>)
2822+
<li>
2823+
Reshuffled text in the [[#intro]] and improved cross-linking.
28092824
</ul>
28102825

28112826
<h3 class="no-num" id="changes-201805">

0 commit comments

Comments
 (0)