8000 [css-pseudo] Minor cleanup of overlap example. · w3c/csswg-drafts@d1e8d47 · GitHub
Skip to content

Commit d1e8d47

Browse files
fantasaifantasai
committed
[css-pseudo] Minor cleanup of overlap example.
--HG-- rename : css-pseudo/Overview.src.html => css-pseudo/Overview.bs extra : rebase_source : a0e8abc77fa11518cdf1fafa4700857d55b5a646
1 parent f355c32 commit d1e8d47

2 files changed

Lines changed: 44 additions & 12 deletions

File tree

‎css-pseudo/Overview.bs‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ Styling the ''::first-letter'' Pseudo-element</h4>
318318
if its 'float' property is ''none'';
319319
otherwise, it is similar to a floated element.
320320
The following properties that apply to ''::first-letter'' pseudo-elements:
321+
321322
<ul>
322323
<li>all font properties (see [[CSS3-FONTS]])
323324
<li>the 'color' and 'opacity' properties (see [[CSS3COLOR]])
@@ -330,6 +331,7 @@ Styling the ''::first-letter'' Pseudo-element</h4>
330331
<li>any other properties defined to apply to ''::first-letter''
331332
by their respective specifications
332333
</ul>
334+
333335
User agents may apply other properties as well.
334336

335337
To allow User-Agents to render a typographically correct drop cap or initial cap,
@@ -463,11 +465,21 @@ Generated Content Pseudo-elements: ''::before'' and ''::after''</h2>
463465
<h2 id="interactions">Overlapping Pseudo-element Interactions</h2>
464466

465467
<div class="example" id="overlapping-example">
468+
Recall that
469+
<ul>
470+
<li>
471+
the contents of ''::before'' and ''::after'' are selected
472+
exactly as if they were normal elements in the document source tree
473+
<li>
474+
the ''::first-letter'' boundaries are tightly wrapped around the first letter text,
475+
and ''::first-letter'' is constrained to exist solely on the first formatted line.
476+
<li>
477+
the ''::first-line'' start is inserted inserted just inside the containing block's element boundary,
478+
and its end after the close of all content on the line
479+
</ul>
480+
466481
The following CSS and HTML example
467-
illustrates how overlapping pseudo-elements may interact.
468-
The first letter of each P element will be green with a font size of ’24pt'.
469-
The rest of the first formatted line will be blue
470-
while the rest of the paragraph will be red.
482+
illustrates how overlapping pseudo-elements interact:
471483

472484
<pre>
473485
p { color: red; font-size: 12pt }
@@ -477,6 +489,10 @@ Generated Content Pseudo-elements: ''::before'' and ''::after''</h2>
477489
&lt;P&gt;Some text that ends up on two lines&lt;/P&gt;
478490
</pre>
479491

492+
The first letter of each P element will be green with a font size of ’24pt'.
493+
The rest of the first formatted line will be blue
494+
while the rest of the paragraph will be red.
495+
480496
Assuming that a line break will occur before the word "ends",
481497
the <i>fictional tag sequence</i> for this fragment might be:
482498
<pre>

‎css-pseudo/O F90F verview.html‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Pseudo-Elements Module Level 4</h1>
5656
<h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20141025>25 October 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20141026>26 October 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl>
5959
<dt>This version:
6060
<dd><a class=u-url href=http://dev.w3.org/csswg/css-pseudo-4/>http://dev.w3.org/csswg/css-pseudo-4/</a>
@@ -450,7 +450,8 @@ <h4 class="heading settled" data-level=2.2.2 id=first-letter-styling><span class
450450
<p>In CSS a ::first-letter pseudo-element is similar to an inline-level element
451451
if its <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visuren.html#propdef-float title=float>float</a> property is <span class=css>none</span>;
452452
otherwise, it is similar to a floated element.
453-
The following properties that apply to <span class=css>::first-letter</span> pseudo-elements:
453+
The following properties that apply to <span class=css>::first-letter</span> pseudo-elements:</p>
454+
454455
<ul>
455456
<li>all font properties (see <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3-fonts title=biblio-CSS3-FONTS>[CSS3-FONTS]</a>)
456457
<li>the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-color-3/#color0 title=color>color</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-color-3/#opacity title=opacity>opacity</a> properties (see <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3color title=biblio-CSS3COLOR>[CSS3COLOR]</a>)
@@ -463,7 +464,8 @@ <h4 class="heading settled" data-level=2.2.2 id=first-letter-styling><span class
463464
<li>any other properties defined to apply to <span class=css>::first-letter</span>
464465
by their respective specifications
465466
</ul>
466-
User agents may apply other properties as well.<p></p>
467+
468+
<p>User agents may apply other properties as well.</p>
467469

468470
<p>To allow User-Agents to render a typographically correct drop cap or initial cap,
469471
the User-Agent may choose a line-height, width and height
@@ -593,11 +595,21 @@ <h2 class="heading settled" data-level=3 id=generated-content><span class=secno>
593595
<h2 class="heading settled" data-level=4 id=interactions><span class=secno>4 </span><span class=content>Overlapping Pseudo-element Interactions</span><a class=self-link href=#interactions></a></h2>
594596

595597
<div class=example id=overlapping-example><a class=self-link href=#overlapping-example></a>
596-
The following CSS and HTML example
597-
illustrates how overlapping pseudo-elements may interact.
598-
The first letter of each P element will be green with a font size of ’24pt'.
599-
The rest of the first formatted line will be blue
600-
while the rest of th E549 e paragraph will be red.
598+
Recall that
599+
<ul>
600+
<li>
601+
the contents of <a class=css data-link-type=maybe href=#selectordef-before title=::before>::before</a> and <a class=css data-link-type=maybe href=#selectordef-after title=::after>::after</a> are selected
602+
exactly as if they were normal elements in the document source tree
603+
<li>
604+
the <span class=css>::first-letter</span> boundaries are tightly wrapped around the first letter text,
605+
and <span class=css>::first-letter</span> is constrained to exist solely on the first formatted line.
606+
<li>
607+
the <a class=css data-link-type=maybe href=#selectordef-first-line title=::first-line>::first-line</a> start is inserted inserted just inside the containing block’s element boundary,
608+
and its end after the close of all content on the line
609+
</ul>
610+
611+
<p>The following CSS and HTML example
612+
illustrates how overlapping pseudo-elements interact:</p>
601613

602614
<pre>p { color: red; font-size: 12pt }
603615
p::first-letter { color: green; font-size: 200% }
@@ -606,6 +618,10 @@ <h2 class="heading settled" data-level=4 id=interactions><span class=secno>4 </s
606618
&lt;P&gt;Some text that ends up on two lines&lt;/P&gt;
607619
</pre>
608620

621+
<p>The first letter of each P element will be green with a font size of ’24pt'.
622+
The rest of the first formatted line will be blue
623+
while the rest of the paragraph will be red.</p>
624+
609625
<p>Assuming that a line break will occur before the word "ends",
610626
the <a data-link-type=dfn href=#fictional-tag-sequence title="fictional tag sequence">fictional tag sequence</a> for this fragment might be:
611627
<pre>&lt;P&gt;

0 commit comments

Comments
 (0)