Skip to content

Commit 4519d8d

Browse files
committed
[css-inline] Add note, example, issue wrt baseline synthesis for replaced elements.
1 parent bf333b4 commit 4519d8d

2 files changed

Lines changed: 77 additions & 13 deletions

File tree

css-inline/Overview.bs

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -863,9 +863,12 @@ Floats always clear an initial letter when floated to the same side. When floate
863863

864864
Issue: Is this the behavior we want? What if the float is on the same line as the initial letter?
865865

866-
<h2 class="no-num" id="appendix-a">
866+
<h2 class="no-num" id="baseline-synthesis">
867867
Appendix A: Synthesizing Baselines</h2>
868868

869+
<h3 class="no-num" id="baseline-synthesis-fonts">
870+
A.1: Synthesizing Baselines for Text</h3>
871+
869872
Some fonts may not contain the baseline information necessary to align properly as described above.
870873
User agents may follow these steps in the absence of a required metric:
871874

@@ -892,6 +895,37 @@ such as lowercase "o" to measure x-height? See https://drafts.csswg.org/css-valu
892895
<li>hanging baseline: .6em;</li>
893896
</ol>
894897
</li>
898+
</ol>
899+
900+
<h3 class="no-num" id="baseline-synthesis-replaced">
901+
A.2: Synthesizing Baselines for Replaced Content</h3>
902+
903+
Issue: Copy over text from <a href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines">CSS Writing Modes</a>
904+
and expand for additional baseline values.
905+
906+
Note: Authors can use margins (positive or negative)
907+
to adjust the alignment of replaced content within a line.
908+
909+
<div class="example">
910+
In this example, the author is using a set of images
911+
to display characters that don't exist.
912+
913+
<pre>
914+
img[src^="/text/"] {
915+
height: 1em; /* Size to match adjacent text */
916+
margin-bottom: -0.2em; /* Baseline at 20% above bottom */
917+
}
918+
...
919+
&lt;p>This is some text with words written in an unencoded script:
920+
&lt;img src="/text/ch3439.png" alt="...">
921+
&lt;img src="/text/ch3440.png" alt="...">
922+
&lt;img src="/text/ch3442.png" alt="...">
923+
</pre>
924+
</div>
925+
926+
Note: A future level of CSS may include a way of specifying a full baseline table for replaced elements.
927+
(This will probably look like a <css>baseline-table</css> property
928+
that accepts ''[&lt;baseline-keyword> <<percentage>>]+''.)
895929

896930

897931
<h2 class="no-num" id="ack">

css-inline/Overview.html

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<div class="head">
5959
<p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a> </p>
6060
<h1 class="p-name no-ref" id="title">CSS Inline Layout Module Level 3</h1>
61-
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-09-10">10 September 2015</time></span></h2>
61+
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2015-09-13">13 September 2015</time></span></h2>
6262
<div data-fill-with="spec-metadata">
6363
<dl>
6464
<dt>This version:
@@ -173,7 +173,12 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
173173
<li><a href="#initial-letter-floats"><span class="secno">2.10.3</span> <span class="content"> Interaction with floats</span></a>
174174
</ul>
175175
</ul>
176-
<li><a href="#appendix-a"><span class="secno"></span> <span class="content"> Appendix A: Synthesizing Baselines</span></a>
176+
<li>
177+
<a href="#baseline-synthesis"><span class="secno"></span> <span class="content"> Appendix A: Synthesizing Baselines</span></a>
178+
<ul class="toc">
179+
<li><a href="#baseline-synthesis-fonts"><span class="secno"></span> <span class="content"> A.1: Synthesizing Baselines for Text</span></a>
180+
<li><a href="#baseline-synthesis-replaced"><span class="secno"></span> <span class="content"> A.2: Synthesizing Baselines for Replaced Content</span></a>
181+
</ul>
177182
<li><a href="#ack"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
178183
<li>
179184
<a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
@@ -203,6 +208,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="cont
203208
<main>
204209
<h2 class="heading settled" data-level="1" id="line-height"><span class="secno">1. </span><span class="content">Line Heights and Baseline Alignment</span><a class="self-link" href="#line-height"></a></h2>
205210
<p class="issue" id="issue-1a1ecd92"><a class="self-link" href="#issue-1a1ecd92"></a>This section is being rewritten. Refer to <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">section 10.8</a> of <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> for the normative CSS definition or the <a href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515/">2002 Working Draft</a> if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.)</p>
211+
<p class="issue" id="issue-95a9f423"><a class="self-link" href="#issue-95a9f423"></a> The CSSWG would like to know which baseline values are necessary: if any can be dropped, or any need to be added.</p>
206212
<h3 class="heading settled" data-level="1.1" id="dominant-baseline property"><span class="secno">1.1. </span><span class="content"> Dominant Baselines: the <a class="property" data-link-type="propdesc" href="#propdef-dominant-baseline">dominant-baseline</a> property</span><a class="self-link" href="#dominant-baseline%20property"></a></h3>
207213
<table class="definition propdef" data-link-for-hint="dominant-baseline">
208214
<tbody>
@@ -358,8 +364,8 @@ <h4 class="heading settled" data-level="1.2.1" id="alignment-baseline-property">
358364
because they’re not really baselines. :/</p>
359365
<p>SVG implementations <em>may</em> support the following aliases
360366
in order to support legacy content:</p>
361-
<pre><dfn data-dfn-for="alignment-baseline" data-dfn-type="value" data-export="" id="valdef-alignment-baseline-before-edge">before-edge<a class="self-link" href="#valdef-alignment-baseline-before-edge"></a></dfn> | <dfn data-dfn-for="alignment-baseline" data-dfn-type="value" data-export="" id="valdef-alignment-baseline-text-before-edge">text-before-edge<a class="self-link" href="#valdef-alignment-baseline-text-before-edge"></a></dfn> = <a data-link-type="maybe" href="#valdef-alignment-baseline-text-top">text-top</a>
362-
<dfn data-dfn-for="alignment-baseline" data-dfn-type="value" data-export="" id="valdef-alignment-baseline-after-edge">after-edge<a class="self-link" href="#valdef-alignment-baseline-after-edge"></a></dfn> | <dfn data-dfn-for="alignment-baseline" data-dfn-type="value" data-export="" id="valdef-alignment-baseline-text-after-edge">text-after-edge<a class="self-link" href="#valdef-alignment-baseline-text-after-edge"></a></dfn> = <a data-link-type="maybe" href="#valdef-alignment-baseline-text-bottom">text-bottom</a>
367+
<pre><dfn data-dfn-for="alignment-baseline" data-dfn-type="value" data-export="" id="valdef-alignment-baseline-text-before-edge">text-before-edge<a class="self-link" href="#valdef-alignment-baseline-text-before-edge"></a></dfn> = <a data-link-type="maybe" href="#valdef-alignment-baseline-text-top">text-top</a>
368+
<dfn data-dfn-for="alignment-baseline" data-dfn-type="value" data-export="" id="valdef-alignment-baseline-text-after-edge">text-after-edge<a class="self-link" href="#valdef-alignment-baseline-text-after-edge"></a></dfn> = <a data-link-type="maybe" href="#valdef-alignment-baseline-text-bottom">text-bottom</a>
363369
</pre>
364370
<p>These values are not allowed in the <a class="property" data-link-type="propdesc" href="#propdef-vertical-align">vertical-align</a> shorthand.</p>
365371
<h4 class="heading settled" data-level="1.2.2" id="baseline-shift-property"><span class="secno">1.2.2. </span><span class="content"> Alignment Shift: <a class="property" data-link-type="propdesc" href="#propdef-baseline-shift">baseline-shift</a> longhand</span><a class="self-link" href="#baseline-shift-property"></a></h4>
@@ -808,6 +814,7 @@ <h3 class="heading settled" data-level="2.8" id="initial-letter-wrapping"><span
808814
}
809815
</pre>
810816
</div>
817+
<p class="issue" id="issue-76db6c38"><a class="self-link" href="#issue-76db6c38"></a> These values and related annoyance is likely unnecessary if someone submits a patch to Blink to support <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>.</p>
811818
</dl>
812819
<p class="issue" id="issue-c4ff3304"><a class="self-link" href="#issue-c4ff3304"></a> Edit figure to show how auto behaves in varying contexts</p>
813820
<div class="example" id="example-768e3a03">
@@ -884,7 +891,8 @@ <h4 class="heading settled" data-level="2.10.2" id="short-para-initial-letter"><
884891
<h4 class="heading settled" data-level="2.10.3" id="initial-letter-floats"><span class="secno">2.10.3. </span><span class="content"> Interaction with floats</span><a class="self-link" href="#initial-letter-floats"></a></h4>
885892
<p>Floats always clear an initial letter when floated to the same side. When floated to the opposite side, they are pushed down to clear the initial letter only if they have specified <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear">clear</a> to this side or they do not fit without overlapping the initial letter.</p>
886893
<p class="issue" id="issue-2ad0a0cb"><a class="self-link" href="#issue-2ad0a0cb"></a> Is this the behavior we want? What if the float is on the same line as the initial letter?</p>
887-
<h2 class="no-num heading settled" id="appendix-a"><span class="content"> Appendix A: Synthesizing Baselines</span><a class="self-link" href="#appendix-a"></a></h2>
894+
<h2 class="no-num heading settled" id="baseline-synthesis"><span class="content"> Appendix A: Synthesizing Baselines</span><a class="self-link" href="#baseline-synthesis"></a></h2>
895+
<h3 class="no-num heading settled" id="baseline-synthesis-fonts"><span class="content"> A.1: Synthesizing Baselines for Text</span><a class="self-link" href="#baseline-synthesis-fonts"></a></h3>
888896
<p>Some fonts may not contain the baseline information necessary to align properly as described above.
889897
User agents may follow these steps in the absence of a required metric:</p>
890898
<ol>
@@ -901,12 +909,33 @@ <h2 class="no-num heading settled" id="appendix-a"><span class="content"> Append
901909
<li>cap-height: .66em;
902910
<li>hanging baseline: .6em;
903911
</ol>
904-
<h2 class="no-num heading settled" id="ack"><span class="content"> Acknowledgments</span><a class="self-link" href="#ack"></a></h2>
905-
<p>Special thanks goes to the initial authors,
906-
Eric A. Meyer and Michel Suignard. </p>
907-
<p>In additions to the authors, this specification would not have been possible without the help from: </p>
908-
<p>David Baron, John Daggett, Stephen Deach, Sujal Parikh, Grzegorz Zygmunt, Chris Wilson, David M Brown, Bobby Tung, Shinyu Murakami, David Hyatt, Sylvain Galineau, Alan Stearns, Ted O’Connor. </p>
909912
</ol>
913+
<h3 class="no-num heading settled" id="baseline-synthesis-replaced"><span class="content"> A.2: Synthesizing Baselines for Replaced Content</span><a class="self-link" href="#baseline-synthesis-replaced"></a></h3>
914+
<p class="issue" id="issue-b76fe1d3"><a class="self-link" href="#issue-b76fe1d3"></a> Copy over text from <a href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines">CSS Writing Modes</a> and expand for additional baseline values.</p>
915+
<p class="note" role="note">Note: Authors can use margins (positive or negative)
916+
to adjust the alignment of replaced content within a line.</p>
917+
<div class="example" id="example-f7450f42">
918+
<a class="self-link" href="#example-f7450f42"></a> In this example, the author is using a set of images
919+
to display characters that don’t exist.
920+
<pre>img[src^="/text/"] {
921+
height: 1em; /* Size to match adjacent text */
922+
margin-bottom: -0.2em; /* Baseline at 20% above bottom */
923+
}
924+
...
925+
&lt;p>This is some text with words written in an unencoded script:
926+
&lt;img src="/text/ch3439.png" alt="...">
927+
&lt;img src="/text/ch3440.png" alt="...">
928+
&lt;img src="/text/ch3442.png" alt="...">
929+
</pre>
930+
</div>
931+
<p class="note" role="note">Note: A future level of CSS may include a way of specifying a full baseline table for replaced elements.
932+
(This will probably look like a <span class="css">baseline-table</span> property
933+
that accepts ''[&lt;baseline-keyword> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a>]+''.)</p>
934+
<h2 class="no-num heading settled" id="ack"><span class="content"> Acknowledgments</span><a class="self-link" href="#ack"></a></h2>
935+
<p>Special thanks goes to the initial authors,
936+
Eric A. Meyer and Michel Suignard. </p>
937+
<p>In additions to the authors, this specification would not have been possible without the help from: </p>
938+
<p>David Baron, John Daggett, Stephen Deach, Sujal Parikh, Grzegorz Zygmunt, Chris Wilson, David M Brown, Bobby Tung, Shinyu Murakami, David Hyatt, Sylvain Galineau, Alan Stearns, Ted O’Connor. </p>
910939
</main>
911940
<h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
912941
<h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
@@ -1000,7 +1029,6 @@ <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-exper
10001029
<h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
10011030
<h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
10021031
<ul class="indexlist">
1003-
<li><a href="#valdef-alignment-baseline-after-edge">after-edge</a><span>, in §1.2.1</span>
10041032
<li><a href="#propdef-alignment-baseline">alignment-baseline</a><span>, in §1.2.1</span>
10051033
<li><a href="#valdef-initial-letter-wrap-all">all</a><span>, in §2.8</span>
10061034
<li>
@@ -1018,7 +1046,6 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
10181046
<li><a href="#baseline">dfn for baseline-shift</a><span>, in §1.2.2</span>
10191047
</ul>
10201048
<li><a href="#propdef-baseline-shift">baseline-shift</a><span>, in §1.2.2</span>
1021-
<li><a href="#valdef-alignment-baseline-before-edge">before-edge</a><span>, in §1.2.1</span>
10221049
<li><a href="#valdef-initial-letter-align-border-box">border-box</a><span>, in §2.4</span>
10231050
<li><a href="#valdef-alignment-baseline-bottom">bottom</a><span>, in §1.2.1</span>
10241051
<li><a href="#valdef-alignment-baseline-center">center</a><span>, in §1.2.1</span>
@@ -1297,6 +1324,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
12971324
<h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
12981325
<div style="counter-reset:issue">
12991326
<div class="issue">This section is being rewritten. Refer to <a href="http://www.w3.org/TR/CSS21/visudet.html#line-height">section 10.8</a> of <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> for the normative CSS definition or the <a href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515/">2002 Working Draft</a> if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.)<a href="#issue-1a1ecd92"></a></div>
1327+
<div class="issue"> The CSSWG would like to know which baseline values are necessary: if any can be dropped, or any need to be added.<a href="#issue-95a9f423"></a></div>
13001328
<div class="issue"> Should be text-over and text-under instead of text-top and text-bottom,
13011329
but maybe it’s better not to use those terms for consistency with legacy <a class="property" data-link-type="propdesc" href="#propdef-vertical-align">vertical-align</a>.<a href="#issue-5c2889ea"></a></div>
13021330
<div class="issue"> Putting <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-top">top</a>, <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-center">center</a>, and <a class="css" data-link-type="maybe" href="#valdef-alignment-baseline-bottom">bottom</a> in here is awkward,
@@ -1315,12 +1343,14 @@ <h2 class="no-num heading settled" id="issues-index"><span class="content">Issue
13151343
<div class="issue"> Do we need an unconditional <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>?
13161344
(I.e. Should we rename this value to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-auto">auto</a> and add a <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> value that does not check for spaces?)<a href="#issue-a826765c"></a></div>
13171345
<div class="issue"> This really needs font-relative lengths to be relative to the used size.<a href="#issue-645378a9"></a></div>
1346+
<div class="issue"> These values and related annoyance is likely unnecessary if someone submits a patch to Blink to support <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>.<a href="#issue-76db6c38"></a></div>
13181347
<div class="issue"> Edit figure to show how auto behaves in varying contexts<a href="#issue-c4ff3304"></a></div>
13191348
<div class="issue"> Handle glyph ink above cap height of font.<a href="#issue-f77cbeb9"></a></div>
13201349
<div class="issue"> Is this the behavior we want? What if the float is on the same line as the initial letter?<a href="#issue-2ad0a0cb"></a></div>
13211350
<div class="issue">Describe in more detail.
13221351
Should we document which characters in which scripts are useful,
13231352
such as lowercase "o" to measure x-height? See https://drafts.csswg.org/css-values/#ex<a href="#issue-3c6d3ab2"></a></div>
1353+
<div class="issue"> Copy over text from <a href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines">CSS Writing Modes</a> and expand for additional baseline values.<a href="#issue-b76fe1d3"></a></div>
13241354
</div>
13251355
</body>
13261356
</html>

0 commit comments

Comments
 (0)