8000 [css-inline] define interaction with floats · w3c/csswg-drafts@5bfe20d · GitHub
Skip to content

Commit 5bfe20d

Browse files
author
dauwhe
committed
[css-inline] define interaction with floats
1 parent 6de2109 commit 5bfe20d

2 files changed

Lines changed: 23 additions & 18 deletions

File tree

‎css-inline/Overview.bs‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -296,20 +296,22 @@ A paragraph with an initial letter may have fewer lines of text than the initial
296296
<p class="caption">The red text is a short paragraph with an initial letter. Note the subsequent paragraph wraps around the initial letter just as text in the paragraph with the initial letter does.</p>
297297
</figure>
298298

299-
If the subsequent paragraph starts with an initial letter, then it must clear the previous paragraph’s initial letter.
299+
If the subsequent block starts with an initial letter,
300+
establishes a new formatting context,
301+
or specifies 'clear' in the start direction,
302+
then it must clear the previous block’s initial letter.
300303

301304
<figure>
302-
<img src="initial-letter-short-para-initial.png" alt="short para with initial letter followed by para with initial" width="600"/>
303-
<p class="caption">The red text is a short paragraph with an initial letter. The subsequent paragraph clears because it also has an initial letter.</p>
305+
<img src="initial-letter-short-para-initial.png" alt="short para with initial letter followed by para with initial" width="600"/>
306+
<p class="caption">The red text is a short paragraph with an initial letter. The subsequent paragraph clears because it also has an initial letter.</p>
304307
</figure>
305308

309+
<h4 id="initial-letter-floats">
310+
Interaction with floats</h4>
306311

312+
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 'clear' to this side or they do not fit without overlapping the initial letter.
307313

308-
309-
310-
311-
312-
314+
Issue: Is this the behavior we want? What if the float is on the same line as the initial letter?
313315

314316

315317
<h2 class="no-num" id="ack">Acknowledgments</h2>

‎css-inline/Overview.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,8 @@ <h2 class="no-num no-toc no-ref heading settled" id=contents><span class=content
120120
An Introduction to Initial Letters</span></a><ul class=toc><li><a href=#drop-initial><span class=secno>2.1.1</span> <span class=content>
121121
Drop Initial</span></a><li><a href=#sunk-initial><span class=secno>2.1.2</span> <span class=content>
122122
Sunken Initial Letters</span></a><li><a href=#raise-initial><span class=secno>2.1.3</span> <span class=content>
123-
Raised Initial Letters</span></a></ul><li><a href=#selecting-drop-initials><span class=secno>2.2</span> <span class=content>Selecting Initial Letters</span></a><li><a href=#sizing-drop-initials><span class=secno>2.3</span> <span class=content>Creating Initial Letters: the <span class=property data-link-type=propdesc title=initial-letter>initial-letter</span> property</span></a><li><a href=#aligning-initial-letter><span class=secno>2.4</span> <span class=content>Alignment of Initial Letters</span></a><li><a href=#sizing-initial-letters><span class=secno>2.5</span> <span class=content>Sizing Initial Letters</span></a><li><a href=#initial-letter-exclusions><span class=secno>2.6</span> <span class=content>Space Around Initial Letters</span></a><li><a href=#initial-letter-paragraphs><span class=secno>2.7</span> <span class=content>Clearing Initial Letters</span></a><ul class=toc><li><a href=#raised-sunken-caps><span class=secno>2.7.1</span> <span class=content>Raised and sunken caps</span></a><li><a href=#short-para-initial-letter><span class=secno>2.7.2</span> <span class=content>Short paragraphs with initial letters</span></a></ul></ul><li><a href=#ack><span class=secno></span> <span class=content>Acknowledgments</span></a><li><a href=#conformance><span class=secno></span> <span class=content>
123+
Raised Initial Letters</span></a></ul><li><a href=#selecting-drop-initials><span class=secno>2.2</span> <span class=content>Selecting Initial Letters</span></a><li><a href=#sizing-drop-initials><span class=secno>2.3</span> <span class=content>Creating Initial Letters: the <span class=property data-link-type=propdesc title=initial-letter>initial-letter</span> property</span></a><li><a href=#aligning-initial-letter><span class=secno>2.4</span> <span class=content>Alignment of Initial Letters</span></a><li><a href=#sizing-initial-letters><span class=secno>2.5</span> <span class=content>Sizing Initial Letters</span></a><li><a href=#initial-letter-exclusions><span class=secno>2.6</span> <span class=content>Space Around Initial Letters</span></a><li><a href=#initial-letter-paragraphs><span class=secno>2.7</span> <span class=content>Clearing Initial Letters</span></a><ul class=toc><li><a href=#raised-sunken-caps><span class=secno>2.7.1</span> <span class=content>Raised and sunken caps</span></a><li><a href=#short-para-initial-letter><span class=secno>2.7.2</span> <span class=content>Short paragraphs with initial letters</span></a><li><a href=#initial-letter-floats><span class=secno>2.7.3</span> <span class=content>
124+
Interaction with floats</span></a></ul></ul><li><a href=#ack><span class=secno></span> <span class=content>Acknowledgments</span></a><li><a href=#conformance><span class=secno></span> <span class=content>
124125
Conformance</span></a><ul class=toc><li><a href=#conventions><span class=secno></span> <span class=content>
125126
Document conventions</span></a><li><a href=#conformance-classes><span class=secno></span> <span class=content>
126127
Conformance classes</span></a><li><a href=#partial><span class=secno></span> <span class=content>
@@ -371,20 +372,22 @@ <h4 class="heading settled" data-level=2.7.2 id=short-para-initial-letter><span
371372
<p class=caption>The red text is a short paragraph with an initial letter. Note the subsequent paragraph wraps around the initial letter just as text in the paragraph with the initial letter does.</p>
372373
</figure>
373374

374-
<p>If the subsequent paragraph starts with an initial letter, then it must clear the previous paragraph’s initial letter.</p>
375+
<p>If the subsequent block starts with an initial letter,
376+
establishes a new formatting context,
377+
or specifies <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-clear>clear</a> in the start direction,
378+
then it must clear the previous block’s initial letter.</p>
375379

376380
<figure>
377-
<img alt="short para with initial letter followed by para with initial" src=initial-letter-short-para-initial.png width=600>
378-
<p class=caption>The red text is a short paragraph with an initial letter. The subsequent paragraph clears because it also has an initial letter.</p>
381+
<img alt="short para with initial letter followed by para with initial" src=initial-letter-short-para-initial.png width=600>
382+
<p class=caption>The red text is a short paragraph with an initial letter. The subsequent paragraph clears because it also has an initial letter.</p>
379383
</figure>
380384

385+
<h4 class="heading settled" data-level=2.7.3 id=initial-letter-floats><span class=secno>2.7.3. </span><span class=content>
386+
Interaction with floats</span><a class=self-link href=#initial-letter-floats></a></h4>
381387

388+
<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=http://dev.w3.org/csswg/css2/visuren.html#propdef-clear>clear</a> to this side or they do not fit without overlapping the initial letter.</p>
382389

383-
384-
385-
386-
387-
390+
<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>
388391

389392

390393
<h2 class="no-num heading settled" id=ack><span class=content>Acknowledgments</span><a class=self-link href=#ack></a></h2>
@@ -527,4 +530,4 @@ <h3 class="no-ref heading settled" id=testing><span class=content>
527530

528531

529532

530-
<h2 class="no-num heading settled" id=references><span class=content>References</span><a class=self-link href=#references></a></h2><h3 class="no-num heading settled" id=normative><span class=content>Normative References</span><a class=self-link href=#normative></a></h3><dl><dt id=biblio-rfc2119 title=rfc2119><a class=self-link href=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <a href=https://tools.ietf.org/html/rfc2119>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href=https://tools.ietf.org/html/rfc2119>https://tools.ietf.org/html/rfc2119</a></dl><h3 class="no-num heading settled" id=informative><span class=content>Informative References</span><a class=self-link href=#informative></a></h3><dl><dt id=biblio-css2 title=CSS2><a class=self-link href=#biblio-css2></a>[CSS2]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/CSS2>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href=http://www.w3.org/TR/CSS2>http://www.w3.org/TR/CSS2</a><dt id=biblio-css21 title=CSS21><a class=self-link href=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <a href=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: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=biblio-css3-line-grid title=CSS3-LINE-GRID><a class=self-link href=#biblio-css3-line-grid></a>[CSS3-LINE-GRID]<dd>Koji Ishii. <a href=http://dev.w3.org/csswg/css-line-grid/>CSS Line Grid Module</a>. Proposal for a CSS module. (Retrieved 26 October 2011) URL: <a href=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dt id=biblio-css3text title=CSS3TEXT><a class=self-link href=#biblio-css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <a href=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: <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dt id=biblio-select title=SELECT><a class=self-link href=#biblio-select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl><h2 class="no-num heading settled" id=index><span class=content>Index</span><a class=self-link href=#index></a></h2><ul class=indexlist><li>dropped initial, <a href=#dropped-initial title="section 2.1.1">2.1.1</a><li>initial-letter, <a href=#propdef-initial-letter title="section 2.3">2.3</a><li>initial-letter-align, <a href=#propdef-initial-letter-align title="section 2.4">2.4</a><li>&lt;integer&gt;, <a href=#typedef-integer title="section 2.3">2.3</a><li>normal, <a href=#normal title="section 2.3">2.3</a><li>&lt;number&gt;, <a href=#typedef-number title="section 2.3">2.3</a><li>raised initial, <a href=#raised-initial title="section 2.1.3">2.1.3</a><li>sunken initial, <a href=#sunken-initial title="section 2.1.2">2.1.2</a></ul><h2 class="no-num heading settled" id=property-index><span class=content>Property Index</span><a class=self-link href=#property-index></a></h2><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody><tr><th scope=row><a class=css data-link-type=property href=#propdef-initial-letter>initial-letter</a><td>normal | [&lt;integer&gt; &lt;number&gt;?]<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><th scope=row><a class=css data-link-type=property href=#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><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style=counter-reset:issue><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-biblio-type=informative data-link-type=biblio href=#biblio-css21 title=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-469c7c8c> ↵ </a></div><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><div class=issue>Add pictures.<a href=#issue-2e07b898> ↵ </a></div><div class=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.<a href=#issue-209367a3> ↵ </a></div><div class=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.<a href=#issue-6403f978> ↵ </a></div><div class=issue>Handle glyph ink above cap height of font.<a href=#issue-f77cbeb9> ↵ </a></div></div>
533+
<h2 class="no-num heading settled" id=references><span class=content>References</span><a class=self-link href=#references></a></h2><h3 class="no-num heading settled" id=normative><span class=content>Normative References</span><a class=self-link href=#normative></a></h3><dl><dt id=biblio-rfc2119 title=rfc2119><a class=self-link href=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <a href=https://tools.ietf.org/html/rfc2119>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href=https://tools.ietf.org/html/rfc2119>https://tools.ietf.org/html/rfc2119</a></dl><h3 class="no-num heading settled" id=informative><span class=content>Informative References</span><a class=self-link href=#informative></a></h3><dl><dt id=biblio-css2 title=CSS2><a class=self-link href=#biblio-css2></a>[CSS2]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/CSS2>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href=http://www.w3.org/TR/CSS2>http://www.w3.org/TR/CSS2</a><dt id=biblio-css21 title=CSS21><a class=self-link href=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <a href=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: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=biblio-css3-line-grid title=CSS3-LINE-GRID><a class=self-link href=#biblio-css3-line-grid></a>[CSS3-LINE-GRID]<dd>Koji Ishii. <a href=http://dev.w3.org/csswg/css-line-grid/>CSS Line Grid Module</a>. Proposal for a CSS module. (Retrieved 26 October 2011) URL: <a href=http://dev.w3.org/csswg/css-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a><dt id=biblio-css3text title=CSS3TEXT><a class=self-link href=#biblio-css3text></a>[CSS3TEXT]<dd>Elika J. Etemad; Koji Ishii. <a href=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: <a href=http://www.w3.org/TR/2012/WD-css3-text-20121113/>http://www.w3.org/TR/2012/WD-css3-text-20121113/</a><dt id=biblio-select title=SELECT><a class=self-link href=#biblio-select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl><h2 class="no-num heading settled" id=index><span class=content>Index</span><a class=self-link href=#index></a></h2><ul class=indexlist><li>dropped initial, <a href=#dropped-initial title="section 2.1.1">2.1.1</a><li>initial-letter, <a href=#propdef-initial-letter title="section 2.3">2.3</a><li>initial-letter-align, <a href=#propdef-initial-letter-align title="section 2.4">2.4</a><li>&lt;integer&gt;, <a href=#typedef-integer title="section 2.3">2.3</a><li>normal, <a href=#normal title="section 2.3">2.3</a><li>&lt;number&gt;, <a href=#typedef-number title="section 2.3">2.3</a><li>raised initial, <a href=#raised-initial title="section 2.1.3">2.1.3</a><li>sunken initial, <a href=#sunken-initial title="section 2.1.2">2.1.2</a></ul><h2 class="no-num heading settled" id=property-index><span class=content>Property Index</span><a class=self-link href=#property-index></a></h2><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<tbody><tr><th scope=row><a class=css data-link-type=property href=#propdef-initial-letter>initial-letter</a><td>normal | [&lt;integer&gt; &lt;number&gt;?]<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><th scope=row><a class=css data-link-type=property href=#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><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style=counter-reset:issue><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-biblio-type=informative data-link-type=biblio href=#biblio-css21 title=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-469c7c8c> ↵ </a></div><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><div class=issue>Add pictures.<a href=#issue-2e07b898> ↵ </a></div><div class=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.<a href=#issue-209367a3> ↵ </a></div><div class=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.<a href=#issue-6403f978> ↵ </a></div><div class=issue>Handle glyph ink above cap height of font.<a href=#issue-f77cbeb9> ↵ </a></div><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></div>

0 commit comments

Comments
 (0)