8000 [css-writing-modes] Add some dfns. · w3c/csswg-drafts@4b77a47 · GitHub
Skip to content

Commit 4b77a47

Browse files
committed
[css-writing-modes] Add some dfns.
1 parent 150282e commit 4b77a47

3 files changed

Lines changed: 40 additions & 30 deletions

File tree

css-grid/Overview.src.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2344,6 +2344,12 @@ <h3 id="abspos-items">
23442344
<figure>
23452345
<img src="images/abspos-grid.svg" width="702" height="402" >
23462346
</figure>
2347+
2348+
Note: Note that grids and the <a>grid-placement properties</a> are <a>flow-relative</a>,
2349+
while abspos offsets are <a>physical</a>,
2350+
so if the 'direction' or 'writing-mode' properties change,
2351+
the grid will transform to match,
2352+
but the offsets won't.
23472353
</div>
23482354

23492355
<h2 id='alignment'>

css-writing-modes/Overview.html

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=c
8888
mailing list</strong> as described above. The <strong>deadline for
8989
comments</strong> is <strong>24 December 2013</strong>.</div>
9090
<div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period:
91-
<ul><li>The <a class=css data-link-type=maybe href=#valuedef-use-glyph-orientation title=use-glyph-orientation>use-glyph-orientation</a> of <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a><li>The <span class=css data-link-type=maybe title=digits>digits</span> value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>.<li>The look-ahead/look-behind sequencing rules for <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>.</ul></div>
91+
<ul><li>The <a class=css data-link-type=maybe href=#valuedef-use-glyph-orientation title=use-glyph-orientation>use-glyph-orientation</a> of <a class=property data-link-type=propdesc href=#propdef-text-orientation title=text-orientation>text-orientation</a><li>The <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-syntax-3/#digit title=digits>digits</a> value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>.<li>The look-ahead/look-behind sequencing rules for <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>.</ul></div>
9292

9393
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
9494
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#text-flow><span class=secno>1</span>
@@ -653,7 +653,7 @@ <h3 class="heading settled heading" data-level=2.4 id=bidi-box-model><span class
653653
</ul>
654654
<p>Analogous rules hold for vertical writing modes.</p>
655655

656-
<p class=note>The <a class=property data-link-type=propdesc href=http://www.w3.org/TR/css3-background/#box-decoration-break title=box-decoration-break>box-decoration-break</a> property can override this
656+
<p class=note>The <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-break-3/#box-decoration-break title=box-decoration-break>box-decoration-break</a> property can override this
657657
behavior to draw box decorations on both sides of each box. <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a> </p>
658658

659659
<h2 class="heading settled heading" data-level=3 id=vertical-intro><span class=secno>3 </span><span class=content>
@@ -838,7 +838,7 @@ <h3 class="heading settled heading" data-level=3.1 id=writing-mode><span class=s
838838

839839
<div class=example>
840840
<p>In this example, <a class=property data-link-type=propdesc href=#propdef-writing-mode title=writing-mode>writing-mode</a> sets the list markers upright
841-
using the <span class=css data-link-type=maybe title=::marker>::marker</span> pseudo-element. Vertical alignment ensures
841+
using the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-lists-3/#selectordef-marker title=::marker>::marker</a> pseudo-element. Vertical alignment ensures
842842
that longer numbers will still align with the right of the first
843843
line of text. <a data-biblio-type=informative data-link-type=biblio href=#css3list title=css3list>[CSS3LIST]</a>
844844
<pre>::marker { writing-mode: horizontal-tb;
@@ -1333,16 +1333,16 @@ <h2 class="heading settled heading" data-level=6 id=abstract-box><span class=sec
13331333
<p>There are three sets of directional terms in CSS:
13341334

13351335
<dl data-export="">
1336-
<dt>physical
1336+
<dt><dfn data-dfn-type=dfn data-export="" id=physical>physical<a class=self-link href=#physical></a></dfn>
13371337
<dd>Interpreted relative to the page, independent of writing mode.
1338-
The physical directions are <dfn data-dfn-type=dfn data-export="" id=left>left<a class=self-link href=#left></a></dfn>, <dfn data-dfn-type=dfn data-export="" id=right>right<a class=self-link href=#right></a></dfn>, <dfn data-dfn-type=dfn data-export="" id=top>top<a class=self-link href=#top></a></dfn>, and
1338+
The <dfn data-dfn-type=dfn data-export="" id=physical-direction title="physical direction">physical directions<a class=self-link href=#physical-direction></a></dfn> are <dfn data-dfn-type=dfn data-export="" id=left>left<a class=self-link href=#left></a></dfn>, <dfn data-dfn-type=dfn data-export="" id=right>right<a class=self-link href=#right></a></dfn>, <dfn data-dfn-type=dfn data-export="" id=top>top<a class=self-link href=#top></a></dfn>, and
13391339
<dfn data-dfn-type=dfn data-export="" id=bottom>bottom<a class=self-link href=#bottom></a></dfn>.
1340-
<dt><a href=#logical-directions>flow-relative</a>
1340+
<dt><dfn data-dfn-type=dfn data-export="" id=flow-relative><a href=#logical-directions>flow-relative</a><a class=self-link href=#flow-relative></a></dfn>
13411341
<dd>Interpreted relative to the flow of content.
13421342
The flow-relative directions are <a data-link-type=dfn href=#start title=start>start</a> and <a data-link-type=dfn href=#end title=end>end</a>,
13431343
or <a data-link-type=dfn href=#block-start title=block-start>block-start</a>, <a data-link-type=dfn href=#block-end title=block-end>block-end</a>, <a data-link-type=dfn href=#inline-start title=inline-start>inline-start</a>, and <a data-link-type=dfn href=#inline-end title=inline-end>inline-end</a>
13441344
if the dimension is also ambiguous.
1345-
<dt><a href=#line-directions>line-relative</a>
1345+
<dt><dfn data-dfn-type=dfn data-export="" id=line-relative><a href=#line-directions>line-relative</a><a class=self-link href=#line-relative></a></dfn>
13461346
<dd>Interpreted relative to the orientation of the line box.
13471347
The line-relative directions are <a data-link-type=dfn href=#line-left title=line-left>line-left</a>, <a data-link-type=dfn href=#line-right title=line-right>line-right</a>,
13481348
<a data-link-type=dfn href=#over title=over>over</a>, and <a data-link-type=dfn href=#under title=under>under</a>.
@@ -1398,7 +1398,7 @@ <h3 class="heading settled heading" data-level=6.1 id=abstract-dimensions><span
13981398
<h3 class="heading settled heading" data-level=6.2 id=logical-directions><span class=secno>6.2 </span><span class=content>
13991399
Flow-relative Directions</span><a class=self-link href=#logical-directions></a></h3>
14001400

1401-
<p>The <dfn data-dfn-type=dfn data-export="" id=flow-relative-directions>flow-relative directions<a class=self-link href=#flow-relative-directions></a></dfn>,
1401+
<p>The <dfn data-dfn-type=dfn data-export="" id=flow-relative-direction title="flow-relative direction">flow-relative directions<a class=self-link href=#flow-relative-direction></a></dfn>,
14021402
<a data-link-type=dfn href=#block-start title=block-start>block-start</a>, <a data-link-type=dfn href=#block-end title=block-end>block-end</a>, <a data-link-type=dfn href=#inline-start title=inline-start>inline-start</a>, and <a data-link-type=dfn href=#inline-end title=inline-end>inline-end</a>,
14031403
are defined relative to the flow of content on the page.
14041404
In an <abbr title=left-to-right>LTR</abbr>
@@ -1494,7 +1494,7 @@ <h3 class="heading settled heading" data-level=6.3 id=line-directions><span clas
14941494
<p>In addition to a line-relative “top” and “bottom” to map things like
14951495
'vertical-align: top', CSS also needs to refer to a line-relative
14961496
“left” and “right” in order to map things like <a class=css data-link-type=propdesc href=http://www.w3.org/TR/css3-text/#text-align title=text-align>text-align: left</a>.
1497-
Thus there are four <dfn data-dfn-type=dfn data-export="" id=line-relative-directions>line-relative directions<a class=self-link href=#line-relative-directions></a></dfn>, which are
1497+
Thus there are four <dfn data-dfn-type=dfn data-export="" id=line-relative-direction title="line-relative direction">line-relative directions<a class=self-link href=#line-relative-direction></a></dfn>, which are
14981498
defined relative to the <a data-link-type=dfn href=#line-orientation title="line orientation">line orientation</a> as follows:
14991499

15001500
<dl data-export="">
@@ -1869,13 +1869,13 @@ <h4 class="heading settled heading" data-level=7.3.2 id=auto-multicol><span clas
18691869
<dl>
18701870
<dt><var>min-content</var>
18711871
<dd>the <a href=http://www.w3.org/TR/css3-sizing/#min-content-measure>min-content measure</a> of the element
1872-
1872+
18731873
<dt><var>max-content</var>
18741874
<dd>the <a href=http://www.w3.org/TR/css3-sizing/#max-content-measure>max-content measure</a> of the element
1875-
1875+
18761876
<dt><var>fill-available</var>
18771877
<dd>the <a href=http://www.w3.org/TR/css3-sizing/#fill-available-fit>fill-available fit</a> into the element’s containing block’s size in the element’s inline axis
1878-
1878+
18791879
<dt><var>fill-fallback</var>
18801880
<dd>the <a href=http://www.w3.org/TR/css3-sizing/#fill-available-fit>fill-available fit</a> into the initial containing block’s size in the element’s inline axis
18811881
</dl>
@@ -2003,7 +2003,7 @@ <h3 class="heading settled heading" data-level=7.4 id=logical-direction-layout><
20032003
<h3 class="heading settled heading" data-level=7.5 id=line-mappings><span class=secno>7.5 </span><span class=content>
20042004
Line-Relative Mappings</span><a class=self-link href=#line-mappings></a></h3>
20052005

2006-
<p>The <a data-link-type=dfn href=#line-relative-directions title="line-relative directions">line-relative directions</a> are
2006+
<p>The <a data-link-type E8ED =dfn href=#line-relative-direction title="line-relative directions">line-relative directions</a> are
20072007
<a href=#over>over</a>,
20082008
<a href=#under>under</a>,
20092009
<a href=#line-left>line-left</a>, and
@@ -2055,10 +2055,10 @@ <h3 class="heading settled heading" data-level=7.6 id=physical-only><span class=
20552055
and do not respond to changes in writing mode:
20562056

20572057
<p> <ul>
2058-
<li>the <span class=css data-link-type=maybe title=rect()>rect()</span> notation of the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visufx.html#propdef-clip title=clip>clip</a> property <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>
2058+
<li>the <a class=css data-link-type=maybe href=http://dev.w3.org/fxtf/masking/#funcdef-rect title=rect()>rect()</a> notation of the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visufx.html#propdef-clip title=clip>clip</a> property <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a>
20592059
<li>the background properties <a data-biblio-type=normative data-link-type=biblio href=#css21 title=css21>[CSS21]</a> <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>
20602060
<li>the border-image properties <a data-biblio-type=normative data-link-type=biblio href=#css3bg title=css3bg>[CSS3BG]</a>
2061-
<li>the offsets of the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/css3-background/#box-shadow title=box-shadow>box-shadow</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/css-text-decor-3/#text-shadow title=text-shadow>text-shadow</a> properties
2061+
<li>the offsets of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow title=box-shadow>box-shadow</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/css-text-decor-3/#text-shadow title=text-shadow>text-shadow</a> properties
20622062
</ul>
20632063

20642064
<h3 class="heading settled heading" data-level=7.7 id=caption-side><span class=secno>7.7 </span><span class=content>
@@ -2123,7 +2123,7 @@ <h2 class="heading settled heading" data-level=9 id=text-combine><span class=sec
21232123
<h3 class="heading settled heading" data-level=9.1 id=text-combine-horizontal><span class=secno>9.1 </span><span class=content>
21242124
Horizontal-in-Vertical Composition: the <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> property</span><a class=self-link href=#text-combine-horizontal></a></h3>
21252125

2126-
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-combine-horizontal>text-combine-horizontal<a class=self-link href=#propdef-text-combine-horizontal></a></dfn><tr><th>Value:<td>none | all | [ digits &lt;integer&gt;? ]<tr><th>Initial:<td>none<tr><th>Applies to:<td>non-replaced inline elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified keyword, plus integer if <span class=css data-link-type=maybe title=digits>digits</span><tr><th>Canonical order:<td>n/a<tr><th>Percentages:<td>n/a<tr><th>Animatable:<td>no</table>
2126+
<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-text-combine-horizontal>text-combine-horizontal<a class=self-link href=#propdef-text-combine-horizontal></a></dfn><tr><th>Value:<td>none | all | [ digits &lt;integer&gt;? ]<tr><th>Initial:<td>none<tr><th>Applies to:<td>non-replaced inline elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified keyword, plus integer if <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-syntax-3/#digit title=digits>digits</a><tr><th>Canonical order:<td>n/a<tr><th>Percentages:<td>n/a<tr><th>Animatable:<td>no</table>
21272127
<p class=issue id=issue-5a90b2dc><a class=self-link href=#issue-5a90b2dc></a>Better (more obvious + easier to type) name for this?
21282128

21292129
<p>This property specifies the combination of multiple characters into the space of a single character.
@@ -2222,7 +2222,7 @@ <h4 class="heading settled heading" data-level=9.1.1 id=text-combine-runs><span
22222222
</div>
22232223

22242224
<p class=note>
2225-
Note that the value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> (<a class=css data-link-type=maybe href=#valuedef-all title=all>all</a> or <span class=css data-link-type=maybe title=digits>digits</span>)
2225+
Note that the value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> (<a class=css data-link-type=maybe href=#valuedef-all title=all>all</a> or <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-syntax-3/#digit title=digits>digits</a>)
22262226
only affects which types of <a data-link-type=dfn href=#character title=characters>characters</a> can be combined
22272227
and what is the maximum length of a combinable sequence.
22282228
It does not otherwise change behavior.
@@ -2325,7 +2325,7 @@ <h3 class="no-num heading settled heading" id=changes-201211><span class=content
23252325
Changes since the <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>November
23262326
2012 CSS Writing Modes Module Level 3 <abbr title="Working Draft">WD</abbr></a></span><a class=self-link href=#changes-201211></a></h3>
23272327
<ul>
2328-
<li>Added back <span class=css data-link-type=maybe title=digits>digits</span> value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> and tightened up rules for compressing text.
2328+
<li>Added back <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-syntax-3/#digit title=digits>digits</a> value of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> and tightened up rules for compressing text.
23292329
<li>Defined better analysis of text to be combined.
23302330
<li>Various fixes/clarifications to orthogonal flows.
23312331
<li>Updated references to UTR50 and how this specification use its values.
@@ -2361,7 +2361,7 @@ <h3 class="no-num heading settled heading" id=changes-201109><span class=content
23612361
<li>Altered <a href=#orthogonal-auto>orthogonal sizing</a>
23622362
to take into account the fill-available size; now the minimum of the
23632363
fill-available and ICB size is used to resolve <span class=css data-link-type=maybe title=auto>auto</span> sizes.
2364-
<li>Renamed <span class=css data-link-type=maybe title=digits>digits</span> to <span class=css data-link-type=maybe title=numeric>numeric</span> and <span class=css data-link-type=maybe title=ascii-digits>ascii-digits</span> to <span class=css data-link-type=maybe title=digits>digits</span> for <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>.
2364+
<li>Renamed <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-syntax-3/#digit title=digits>digits</a> to <span class=css data-link-type=maybe title=numeric>numeric</span> and <span class=css data-link-type=maybe title=ascii-digits>ascii-digits</span> to <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-syntax-3/#digit title=digits>digits</a> for <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a>.
23652365
<li>Defined interaction of <a class=property data-link-type=propdesc href=#propdef-text-combine-horizontal title=text-combine-horizontal>text-combine-horizontal</a> and <a class=property data-link-type=propdesc href=http://www.w3.org/TR/css3-text/#text-transform title=text-transform>text-transform</a>.
23662366
</ul>
23672367

@@ -2639,7 +2639,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
26392639
<li>end, <a href=#end title="section 6.2">6.2</a>
26402640
<li>establish an orthogonal flow, <a href=#establish-an-orthogonal-flow- title="section 7.3">7.3</a>
26412641
<li>extent, <a href=#extent title="section 6.1">6.1</a>
2642-
<li>flow-relative directions, <a href=#flow-relative-directions title="section 6.2">6.2</a>
2642+
<li>flow-relative, <a href=#flow-relative title="section 6">6</a>
2643+
<li>flow-relative direction, <a href=#flow-relative-direction title="section 6.2">6.2</a>
26432644
<li>forced paragraph break, <a href=#forced-paragraph-break title="section 2">2</a>
26442645
<li>height, <a href=#height title="section 6">6</a>
26452646
<li>horizontal axis, <a href=#x-axis title="section 6">6</a>
@@ -2664,7 +2665,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
26642665
<li>line-left, <a href=#line-left title="section 6.3">6.3</a>
26652666
<li>line orientation, <a href=#line-orientation title="section 6.3">6.3</a>
26662667
<li>line-over, <a href=#over title="section 6.3">6.3</a>
2667-
<li>line-relative directions, <a href=#line-relative-directions title="section 6.3">6.3</a>
2668+
<li>line-relative, <a href=#line-relative title="section 6">6</a>
2669+
<li>line-relative direction, <a href=#line-relative-direction title="section 6.3">6.3</a>
26682670
<li>line-right, <a href=#line-right title="section 6.3">6.3</a>
26692671
<li>line-under, <a href=#under title="section 6.3">6.3</a>
26702672
<li>logical height, <a href=#logical-height title="section 6.1">6.1</a>
@@ -2676,7 +2678,9 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
26762678
<li>normal, <a href=#valuedef-normal title="section 2.2">2.2</a>
26772679
<li>orthogonal flow, <a href=#establish-an-orthogonal-flow- title="section 7.3">7.3</a>
26782680
<li>over, <a href=#over title="section 6.3">6.3</a>
2681+
<li>physical, <a href=#physical title="section 6">6</a>
26792682
<li>physical dimensions, <a href=#physical-dimensions title="section 6">6</a>
2683+
<li>physical direction, <a href=#physical-direction title="section 6">6</a>
26802684
<li>plaintext, <a href=#valuedef-plaintext title="section 2.2">2.2</a>
26812685
<li>principal writing mode, <a href=#principal-writing-mode title="section 3.1">3.1</a>
26822686
<li>right, <a href=#right title="section 6">6</a>

0 commit comments

Comments
 (0)