Skip to content

Commit b994681

Browse files
committed
[css-inline] bikeshed
1 parent 671fcc5 commit b994681

2 files changed

Lines changed: 34 additions & 13 deletions

File tree

css-inline/Overview.bs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,7 @@ this triggers the special layout considerations described below.
396396
<pre>p::first-letter { initial-letter: 2; }</pre>
397397
</div>
398398

399-
Issue: Define interaction with Ruby. Easiest is to make it not apply to/within ruby.
399+
Issue: Define interaction with <a>ruby</a>. Easiest is to make it not apply to/within <a>ruby</a>.
400400

401401
The 'initial-letter' property does not apply to boxes that are not positioned at the start of the line due to bidi reordering.
402402

css-inline/Overview.html

Lines changed: 33 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-13">13 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-15">15 September 2015</time></span></h2>
6262
<div data-fill-with="spec-metadata">
6363
<dl>
6464
<dt>This version:
@@ -109,7 +109,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="conten
109109
W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
110110
that page also includes instructions for disclosing a patent.
111111
An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
112-
<p> This document is governed by the <a href="http://www.w3.org/2014/Process-20140801/" id="w3c_process_revision">1 August 2014 W3C Process Document</a>. </p>
112+
<p> This document is governed by the <a href="http://www.w3.org/2015/Process-20150901/" id="w3c_process_revision">1 September 2015 W3C Process Document</a>. </p>
113113
<p></p>
114114
</div>
115115
<div data-fill-with="at-risk">
@@ -452,23 +452,31 @@ <h4 class="heading settled" data-level="2.1.2" id="sunk-initial"><span class="se
452452
<p class="caption">Sunken cap. The letter drops two lines, but is the size of a three-line initial letter.</p>
453453
</figure>
454454
<h4 class="heading settled" data-level="2.1.3" id="raise-initial"><span class="secno">2.1.3. </span><span class="content"> Raised Initial Letters</span><a class="self-link" href="#raise-initial"></a></h4>
455-
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="raised-initial">raised initial<a class="self-link" href="#raised-initial"></a></dfn> (often called a “raised cap” or “stick-up cap”) “sinks” to the first text baseline. Unlike simply increasing the font size, which affects the line spacing below it to make room for potential descenders, it does not sink below that.</p>
455+
<p>A <dfn data-dfn-type="dfn" data-noexport="" id="raised-initial">raised initial<a class="self-link" href="#raised-initial"></a></dfn> (often called a “raised cap” or “stick-up cap”) “sinks” to the first text baseline.</p>
456+
<p class="note" role="note">Note: A proper raised initial has several advantages
457+
over simply increasing the font size of a first letter.
458+
The line spacing in the rest of the paragraph
459+
will not be altered, but text will still be excluded
460+
around large descenders.
461+
And if the size of raised initial is defined
462+
to be an integral number of lines,
463+
implicit baseline grids can be maintained.</p>
456464
<figure>
457465
<img alt="raised cap" src="images/RaisedCap.png" width="480">
458466
<p class="caption">Raised cap. The initial letter is the size of a 3-line initial, but does not drop.</p>
459467
</figure>
460468
<h3 class="heading settled" data-level="2.2" id="selecting-drop-initials"><span class="secno">2.2. </span><span class="content">Selecting Initial Letters</span><a class="self-link" href="#selecting-drop-initials"></a></h3>
461469
<p>Initial letters are typically a single letter, which can be selected by the <code>::first-letter</code> pseudo-element, as defined in <a data-link-type="biblio" href="#biblio-select">[SELECT]</a>.</p>
462470
<p>Authors who need more control over which characters are included in an initial letter, or who want to apply initial-letter formatting to replaced elements or multiple words can also apply the <a class="property" data-link-type="propdesc" href="#propdef-initial-letter">initial-letter</a> property to the first inline-level child of a block container. </p>
463-
<div class="example" id="example-9394ec8b">
464-
<a class="self-link" href="#example-9394ec8b"></a>
471+
<div class="example" id="example-bab63235">
472+
<a class="self-link" href="#example-bab63235"></a>
465473
<pre>&lt;p>This paragraph has a dropped “T”.
466474
&lt;p>&lt;img alt="H" src="illuminated-h.svg">ere we have an illuminated “H”.
467475
&lt;p>&lt;span>Words may also&lt;/span> be given initial letter styling at the beginning of a paragraph.
468476
</pre>
469477
<pre>::first-letter, /* style first paragraph’s T */
470478
img, /* style illuminated H */
471-
span /* drop Words may also */
479+
span /* style phrase inside span */
472480
{ initial-letter: 2; }
473481
</pre>
474482
</div>
@@ -539,7 +547,7 @@ <h3 class="heading settled" data-level="2.3" id="sizing-drop-initials"><span cla
539547
<a class="self-link" href="#example-3c97a721"></a> The following code will create a 2-line dropped initial letter at the beginning of each paragraph:
540548
<pre>p::first-letter { initial-letter: 2; }</pre>
541549
</div>
542-
<p class="issue" id="issue-664624cd"><a class="self-link" href="#issue-664624cd"></a> Define interaction with Ruby. Easiest is to make it not apply to/within ruby.</p>
550+
<p class="issue" id="issue-cf76c839"><a class="self-link" href="#issue-cf76c839"></a> Define interaction with <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby">ruby</a>. Easiest is to make it not apply to/within <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby">ruby</a>.</p>
543551
<p>The <a class="property" data-link-type="propdesc" href="#propdef-initial-letter">initial-letter</a> property does not apply to boxes that are not positioned at the start of the line due to bidi reordering.</p>
544552
<h4 class="heading settled" data-level="2.3.1" id="initial-letter-properties"><span class="secno">2.3.1. </span><span class="content"> Properties</span><a class="self-link" href="#initial-letter-properties"></a></h4>
545553
<p>The following properties apply to an <a data-link-type="dfn" href="#initial-letter">initial letter</a>:</p>
@@ -629,6 +637,7 @@ <h3 class="heading settled" data-level="2.4" id="aligning-initial-letter"><span
629637
<dd>Uses the <a data-link-type="dfn" href="#initial-letter">initial letter box</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line-over">line-over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line-under">line-under</a> border edges
630638
as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#over">over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#under">under</a> alignment points, respectively.
631639
</dl>
640+
<p class="issue" id="issue-67014286"><a class="self-link" href="#issue-67014286"></a> Bikeshed names of hanging and hebrew alignment points. Are there proper typographic terms for these?</p>
632641
<div class="example" id="example-0cc7f40b">
633642
<a class="self-link" href="#example-0cc7f40b"></a> The vertical writing mode example from <a href="#f2">Figure 2</a> could be coded as:
634643
<pre>span.initial {
@@ -644,10 +653,13 @@ <h3 class="heading settled" data-level="2.4" id="aligning-initial-letter"><span
644653
use its <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#over">over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#under">under</a> content-box edges.
645654
<li>Else if the <a data-link-type="dfn" href="#initial-letter">initial letter</a> contains any character from the Han, Hangul, Kana, or Yi <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#unicode-script">Unicode scripts</a>,
646655
use the ideographic character face bottom and top edge baselines.
656+
<li>Else if the <a data-link-type="dfn" href="#initial-letter">initial letter</a> contains any character from the Devanagari, Bengali, and Gurmukhi <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#unicode-script">Unicode scripts</a>,
657+
use the hanging and alphabetic baselines.
647658
<li>Else if the <a data-link-type="dfn" href="#initial-letter">initial letter</a> contains any character from the Hebrew <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#unicode-script">Unicode scripts</a>,
648659
use the ideographic character face bottom and top edge baselines.
649660
<li>Else use the alphabetic and cap-height baselines.
650661
</ol>
662+
<p class="issue" id="issue-bf6dbf91"><a class="self-link" href="#issue-bf6dbf91"></a> What is the proper alignment for South Asian scripts that do not have the explicit hanging baseline, such as Tamil or Telugu?</p>
651663
<p class="note" role="note">Note: The ordering of keywords in this property is fixed in case <a class="css" data-link-type="maybe" href="#valdef-initial-letter-align-border-box">border-box</a> is expanded to <span class="css">[ border-box | alphabetic | ideographic | hebrew | hanging ]</span> to allow explicitly specifying the <a data-link-type="dfn" href="#initial-letter">initial letter</a>’s alignment points.</p>
652664
<h4 class="heading settled" data-level="2.4.1" id="initial-letter-align-defaults"><span class="secno">2.4.1. </span><span class="content"> UA Default Stylesheet for <a class="property" data-link-type="propdesc" href="#propdef-initial-letter-align">initial-letter-align</a></span><a class="self-link" href="#initial-letter-align-defaults"></a></h4>
653665
<p>In order to provide the better behavior by default,
@@ -827,11 +839,11 @@ <h3 class="heading settled" data-level="2.8" id="initial-letter-wrapping"><span
827839
<p><img alt="regular dropcap A" src="images/A-wraparound-none.png" width="600"></p>
828840
<p>Ordinary initial letter with no wrapping.</p>
829841
</div>
830-
<div class="example" id="example-dce39d6a">
831-
<a class="self-link" href="#example-dce39d6a"></a>
842+
<div class="example" id="example-246e91df">
843+
<a class="self-link" href="#example-246e91df"></a>
832844
<pre>p::first-letter {
833845
initial-letter: 3;
834-
initial-letter-wrap: auto;
846+
initial-letter-wrap: all;
835847
}
836848
</pre>
837849
<p><img alt="text wrapping around dropcap A" src="images/A-wraparound.png" width="600"></p>
@@ -935,7 +947,7 @@ <h2 class="no-num heading settled" id="ack"><span class="content"> Acknowledgmen
935947
<p>Special thanks goes to the initial authors,
936948
Eric A. Meyer and Michel Suignard. </p>
937949
<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>
950+
<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, Florian Rivoal. </p>
939951
</main>
940952
<h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
941953
<h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
@@ -1139,6 +1151,11 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
11391151
<ul>
11401152
<li><a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">font-size</a>
11411153
</ul>
1154+
<li>
1155+
<a data-link-type="biblio" href="#biblio-css-ruby-1">[css-ruby-1]</a> defines the following terms:
1156+
<ul>
1157+
<li><a href="https://drafts.csswg.org/css-ruby-1/#ruby">ruby</a>
1158+
</ul>
11421159
<li>
11431160
<a data-link-type="biblio" href="#biblio-css-text-3">[css-text-3]</a> defines the following terms:
11441161
<ul>
@@ -1204,6 +1221,8 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
12041221
<dd>CSS Color Module Level 4 URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a>
12051222
<dt id="biblio-css-fonts-3"><a class="self-link" href="#biblio-css-fonts-3"></a>[CSS-FONTS-3]
12061223
<dd>John Daggett. <a href="http://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 3 October 2013. CR. URL: <a href="http://www.w3.org/TR/css-fonts-3/">http://www.w3.org/TR/css-fonts-3/</a>
1224+
<dt id="biblio-css-ruby-1"><a class="self-link" href="#biblio-css-ruby-1"></a>[CSS-RUBY-1]
1225+
<dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-ruby-1/">CSS Ruby Layout Module Level 1</a>. 5 August 2014. WD. URL: <a href="http://www.w3.org/TR/css-ruby-1/">http://www.w3.org/TR/css-ruby-1/</a>
12071226
<dt id="biblio-css-text-3"><a class="self-link" href="#biblio-css-text-3"></a>[CSS-TEXT-3]
12081227
<dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 10 October 2013. LCWD. URL: <a href="http://www.w3.org/TR/css-text-3/">http://www.w3.org/TR/css-text-3/</a>
12091228
<dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES]
@@ -1332,8 +1351,10 @@ <h2 class="no-num heading settled" id="issues-index"><span class="content">Issue
13321351
<div class="issue">The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.<a href="#issue-f90429eb"></a></div>
13331352
<div class="issue"> Should this be <span class="css">initial-letters</span> (plural) as originally discussed?
13341353
Since it can apply to multiple letters.<a href="#issue-4601aace"></a></div>
1335-
<div class="issue"> Define interaction with Ruby. Easiest is to make it not apply to/within ruby.<a href="#issue-664624cd"></a></div>
1354+
<div class="issue"> Define interaction with <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby">ruby</a>. Easiest is to make it not apply to/within <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby">ruby</a>.<a href="#issue-cf76c839"></a></div>
13361355
<div class="issue"> Add <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a> as requested by Tantek... need to integrate with model.<a href="#issue-939d845d"></a></div>
1356+
<div class="issue"> Bikeshed names of hanging and hebrew alignment points. Are there proper typographic terms for these?<a href="#issue-67014286"></a></div>
1357+
<div class="issue"> What is the proper alignment for South Asian scripts that do not have the explicit hanging baseline, such as Tamil or Telugu?<a href="#issue-bf6dbf91"></a></div>
13371358
<div class="issue"> We don’t have a way to do subtag selection with attr selectors.
13381359
(It’s a feature of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#lang-pseudo">:lang()</a> in Selectors 4,
13391360
but we don’t want to use that because we want to hit the language root,

0 commit comments

Comments
 (0)