You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-inline/Overview.bs
+4-1Lines changed: 4 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -52,7 +52,7 @@ A <dfn>dropped initial</dfn> (or “drop cap”) is a larger-than-usual letter a
52
52
<p class="caption">Three-line drop initial with E acute. Since the cap-height of the drop initial aligns with the cap-height of the main text, the accent extends above the paragraph.</p>
53
53
</figure>
54
54
55
-
The exact size and position of a drop cap depends on the alignment of its glyph. [TK] Reference points on the drop cap must align precisely with reference points in the text. In Western scripts, the top reference points are the cap height of the initial letter and of the first line of text. The bottom reference points are the alphabetic baseline of the initial letter and the baseline of the Nth line of text. <a href="#f2">Figure 2</a> shows a simple two-line drop cap, with the relevant reference lines marked.
55
+
The exact size and position of a <a>dropped initial</a> depends on the alignment of its glyph. [TK] Reference points on the drop cap must align precisely with reference points in the text. In Western scripts, the top reference points are the cap height of the initial letter and of the first line of text. The bottom reference points are the alphabetic baseline of the initial letter and the baseline of the Nth line of text. <a href="#f2">Figure 2</a> shows a simple two-line drop cap, with the relevant reference lines marked.
56
56
57
57
58
58
@@ -144,6 +144,9 @@ This property specifies styling for dropped, raised, and sunken initial letters.
144
144
<dd>This optional second argument argument defines the number of lines the initial letter should sink. Values must be greater than zero. If omitted, it duplicates the first argument, floored to the nearest positive whole number.
145
145
</dl>
146
146
147
+
An <dfn>initial letter</dfn> is a box to which 'initial-letter' applies
148
+
and is not ''normal'': this triggers the special layout considerations described below.
<pclass=caption>Three-line drop initial with E acute. Since the cap-height of the drop initial aligns with the cap-height of the main text, the accent extends above the paragraph.</p>
161
161
</figure>
162
162
163
-
<p>The exact size and position of a drop cap depends on the alignment of its glyph. [TK] Reference points on the drop cap must align precisely with reference points in the text. In Western scripts, the top reference points are the cap height of the initial letter and of the first line of text. The bottom reference points are the alphabetic baseline of the initial letter and the baseline of the Nth line of text. <ahref=#f2>Figure 2</a> shows a simple two-line drop cap, with the relevant reference lines marked.</p>
163
+
<p>The exact size and position of a <adata-link-type=dfnhref=#dropped-initial>dropped initial</a> depends on the alignment of its glyph. [TK] Reference points on the drop cap must align precisely with reference points in the text. In Western scripts, the top reference points are the cap height of the initial letter and of the first line of text. The bottom reference points are the alphabetic baseline of the initial letter and the baseline of the Nth line of text. <ahref=#f2>Figure 2</a> shows a simple two-line drop cap, with the relevant reference lines marked.</p>
<dd>This optional second argument argument defines the number of lines the initial letter should sink. Values must be greater than zero. If omitted, it duplicates the first argument, floored to the nearest positive whole number.
242
242
</dl>
243
243
244
+
<p>An <dfndata-dfn-type=dfndata-noexport="" id=initial-letter>initial letter<aclass=self-linkhref=#initial-letter></a></dfn> is a box to which <aclass=propertydata-link-type=propdeschref=#propdef-initial-letter>initial-letter</a> applies
245
+
and is not <spanclass=css>normal</span>: this triggers the special layout considerations described below.</p>
246
+
244
247
<divclass=example>
245
248
Here are some examples of <aclass=propertydata-link-type=propdeschref=#propdef-initial-letter>initial-letter</a> usage:
<dd>The user agent selects the value which corresponds to the language of the text. Western languages would default to <aclass=cssdata-link-type=maybehref=http://dev.w3.org/csswg/css-counter-styles-3/#valdef-counter-style-system-alphabetic>alphabetic</a>, CJK languages to <spanclass=css>ideographic</span>, and some Indic languages to <aclass=cssdata-link-type=maybehref=http://dev.w3.org/csswg/css-text-3/#valdef-text-indent-hanging>hanging</a>. </dd>
283
+
<dd>The user agent selects the value which corresponds to the language of the text. Western languages would default to <spanclass=css>alphabetic</span>, CJK languages to <spanclass=css>ideographic</span>, and some Indic languages to <spanclass=css>hanging</span>. </dd>
281
284
<dt>alphabetic</dt>
282
285
<dd>As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.</dd>
<h2class="no-num heading settled" id=references><spanclass=content>References</span><aclass=self-linkhref=#references></a></h2><h3class="no-num heading settled" id=normative><spanclass=content>Normative References</span><aclass=self-linkhref=#normative></a></h3><dl><dtid=biblio-rfc2119title=rfc2119><aclass=self-linkhref=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <ahref=https://tools.ietf.org/html/rfc2119>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <ahref=https://tools.ietf.org/html/rfc2119>https://tools.ietf.org/html/rfc2119</a></dl><h3class="no-num heading settled" id=informative><spanclass=content>Informative References</span><aclass=self-linkhref=#informative></a></h3><dl><dtid=biblio-css2title=CSS2><aclass=self-linkhref=#biblio-css2></a>[CSS2]<dd>Bert Bos; et al. <ahref=http://www.w3.org/TR/CSS2>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <ahref=http://www.w3.org/TR/CSS2>http://www.w3.org/TR/CSS2</a><dtid=biblio-css21title=CSS21><aclass=self-linkhref=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <ahref=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <ahref=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dtid=biblio-css3-line-gridtitle=CSS3-LINE-GRID><aclass=self-linkhref=#biblio-css3-line-grid></a>[CSS3-LINE-GRID]<dd>Koji Ishii. <ahref=http://dev.w3.org/csswg/css-line-grid/>CSS Line Grid Module</a>. Proposal for a CSS module. (Retrieved 26 October 2011) URL: <ahref=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dtid=biblio-css3texttitle=CSS3TEXT><aclass=self-linkhref=#biblio-css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <ahref=http://www.w3.org/TR/2012/WD-css3-text-20121113/>CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <ahref=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dtid=biblio-selecttitle=SELECT><aclass=self-linkhref=#biblio-select></a>[SELECT]<dd>Tantek Çelik; et al. <ahref=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <ahref=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl><h2class="no-num heading settled" id=index><spanclass=content>Index</span><aclass=self-linkhref=#index></a></h2><ulclass=indexlist><li>dropped initial, <ahref=#dropped-initialtitle="section 2.1.1">2.1.1</a><li>initial-letter, <ahref=#propdef-initial-lettertitle="section 2.3">2.3</a><li>initial-letter-align, <ahref=#propdef-initial-letter-aligntitle="section 2.4">2.4</a><li><integer>, <ahref=#typedef-integertitle="section 2.3">2.3</a><li>normal, <ahref=#normaltitle="section 2.3">2.3</a><li><number>, <ahref=#typedef-numbertitle="section 2.3">2.3</a><li>raised initial, <ahref=#raised-initialtitle="section 2.1.3">2.1.3</a><li>sunken initial, <ahref=#sunken-initialtitle="section 2.1.2">2.1.2</a></ul><h2class="no-num heading settled" id=property-index><spanclass=content>Property Index</span><aclass=self-linkhref=#property-index></a></h2><tableclass="proptable data"><thead><tr><thscope=col>Name<thscope=col>Value<thscope=col>Initial<thscope=col>Applies to<thscope=col>Inh.<thscope=col>%ages<thscope=col>Media<thscope=col>Animatable<thscope=col>Computed value<tbody><tr><thscope=row><aclass=cssdata-link-type=propertyhref=#propdef-initial-letter>initial-letter</a><td>normal | [<integer> <number>?]<td>normal<td>::first-letter pseudo-elements and inline-level first child of a block container<td>no<td>N/A<td>visual<td>no<td>as specified<tr><thscope=row><aclass=cssdata-link-type=propertyhref=#propdef-initial-letter-align>initial-letter-align</a><td>[ auto | alphabetic | hanging | ideographic ]<td>auto<td>::first-letter pseudo elements and inline level first child of a block container<td>no<td>N/A<td>visual<td>no<td>???</table><h2class="no-num heading settled" id=issues-index><spanclass=content>Issues Index</span><aclass=self-linkhref=#issues-index></a></h2><divstyle=counter-reset:issue><divclass=issue>This section is being rewritten. Refer to <ahref=http://www.w3.org/TR/CSS21/visudet.html#line-height>section 10.8</a> of <adata-biblio-type=informativedata-link-type=bibliohref=#biblio-css21title=CSS21>[CSS21]</a> for the normative CSS definition or the <ahref=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.)<ahref=#issue-469c7c8c> ↵ </a></div><divclass=issue>The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.<ahref=#issue-f90429eb> ↵ </a></div><divclass=issue>Add pictures.<ahref=#issue-2e07b898> ↵ </a></div><divclass=issue>Input from those knowledgeable about non-Western typographic traditions would be very helpful in describing the appropriate alignments. More values may be required for this property.<ahref=#issue-209367a3> ↵ </a></div><divclass=issue>Need to decide whether using margin edges or content edges for alignment. Writing Modes uses the margin edges for baseline alignment of replaced elements. There are cases for both content-alignment and margin-alignment for text. In both cases the margin box needs to be excluded.<ahref=#issue-6403f978> ↵ </a></div><divclass=issue>Handle glyph ink above cap height of font.<ahref=#issue-f77cbeb9> ↵ </a></div><divclass=issue>Is this the behavior we want? What if the float is on the same line as the initial letter?<ahref=#issue-2ad0a0cb> ↵ </a></div></div>
536
+
<h2class="no-num heading settled" id=references><spanclass=content>References</span><aclass=self-linkhref=#references></a></h2><h3class="no-num heading settled" id=normative><spanclass=content>Normative References</span><aclass=self-linkhref=#normative></a></h3><dl><dtid=biblio-rfc2119title=rfc2119><aclass=self-linkhref=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <ahref=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <ahref=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl><h3class="no-num heading settled" id=informative><spanclass=content>Informative References</span><aclass=self-linkhref=#informative></a></h3><dl><dtid=biblio-css2title=CSS2><aclass=self-linkhref=#biblio-css2></a>[CSS2]<dd>Bert Bos; et al. <ahref=http://www.w3.org/TR/CSS2>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <ahref=http://www.w3.org/TR/CSS2>http://www.w3.org/TR/CSS2</a><dtid=biblio-css21title=CSS21><aclass=self-linkhref=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <ahref=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <ahref=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dtid=biblio-css3-line-gridtitle=CSS3-LINE-GRID><aclass=self-linkhref=#biblio-css3-line-grid></a>[CSS3-LINE-GRID]<dd>Koji Ishii. <ahref=http://dev.w3.org/csswg/css-line-grid/>CSS Line Grid Module</a>. Proposal for a CSS module. (Retrieved 26 October 2011) URL: <ahref=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dtid=biblio-css3texttitle=CSS3TEXT><aclass=self-linkhref=#biblio-css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <ahref=http://www.w3.org/TR/2012/WD-css3-text-20121113/>CSS Text Module Level 3</a>. 13 November 2012. W3C Working Draft. (Work in progress.) URL: <ahref=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dtid=biblio-selecttitle=SELECT><aclass=self-linkhref=#biblio-select></a>[SELECT]<dd>Tantek Çelik; et al. <ahref=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <ahref=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl><h2class="no-num heading settled" id=index><spanclass=content>Index</span><aclass=self-linkhref=#index></a></h2><ulclass=indexlist><li>dropped initial, <ahref=#dropped-initialtitle="section 2.1.1">2.1.1</a><li>initial-letter, <ahref=#propdef-initial-lettertitle="section 2.3">2.3</a><li>initial letter, <ahref=#initial-lettertitle="section 2.3">2.3</a><li>initial-letter-align, <ahref=#propdef-initial-letter-aligntitle="section 2.4">2.4</a><li><integer>, <ahref=#typedef-integertitle="section 2.3">2.3</a><li>normal, <ahref=#normaltitle="section 2.3">2.3</a><li><number>, <ahref=#typedef-numbertitle="section 2.3">2.3</a><li>raised initial, <ahref=#raised-initialtitle="section 2.1.3">2.1.3</a><li>sunken initial, <ahref=#sunken-initialtitle="section 2.1.2">2.1.2</a></ul><h2class="no-num heading settled" id=property-index><spanclass=content>Property Index</span><aclass=self-linkhref=#property-index></a></h2><tableclass="proptable data"><thead><tr><thscope=col>Name<thscope=col>Value<thscope=col>Initial<thscope=col>Applies to<thscope=col>Inh.<thscope=col>%ages<thscope=col>Media<thscope=col>Animatable<thscope=col>Computed value<tbody><tr><thscope=row><aclass=cssdata-link-type=propertyhref=#propdef-initial-letter>initial-letter</a><td>normal | [<integer> <number>?]<td>normal<td>::first-letter pseudo-elements and inline-level first child of a block container<td>no<td>N/A<td>visual<td>no<td>as specified<tr><thscope=row><aclass=cssdata-link-type=propertyhref=#propdef-initial-letter-align>initial-letter-align</a><td>[ auto | alphabetic | hanging | ideographic ]<td>auto<td>::first-letter pseudo elements and inline level first child of a block container<td>no<td>N/A<td>visual<td>no<td>???</table><h2class="no-num heading settled" id=issues-index><spanclass=content>Issues Index</span><aclass=self-linkhref=#issues-index></a></h2><divstyle=counter-reset:issue><divclass=issue>This section is being rewritten. Refer to <ahref=http://www.w3.org/TR/CSS21/visudet.html#line-height>section 10.8</a> of <adata-biblio-type=informativedata-link-type=bibliohref=#biblio-css21title=CSS21>[CSS21]</a> for the normative CSS definition or the <ahref=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.)<ahref=#issue-469c7c8c> ↵ </a></div><divclass=issue>The editors would appreciate any examples of drop initials in non-western scripts, especially Arabic and Indic scripts.<ahref=#issue-f90429eb> ↵ </a></div><divclass=issue>Add pictures.<ahref=#issue-2e07b898> ↵ </a></div><divclass=issue>Input from those knowledgeable about non-Western typographic traditions would be very helpful in describing the appropriate alignments. More values may be required for this property.<ahref=#issue-209367a3> ↵ </a></div><divclass=issue>Need to decide whether using margin edges or content edges for alignment. Writing Modes uses the margin edges for baseline alignment of replaced elements. There are cases for both content-alignment and margin-alignment for text. In both cases the margin box needs to be excluded.<ahref=#issue-6403f978> ↵ </a></div><divclass=issue>Handle glyph ink above cap height of font.<ahref=#issue-f77cbeb9> ↵ </a></div><divclass=issue>Is this the behavior we want? What if the float is on the same line as the initial letter?<ahref=#issue-2ad0a0cb> ↵ </a></div></div>
0 commit comments