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
+6-1Lines changed: 6 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -2321,7 +2321,12 @@ A three-line drop initial in Adobe Minion Pro would have a font size of 61.2pt,
2321
2321
2322
2322
The alignment constraints depend on the script used. In Japanese vertical writing mode, it appears that the initial letter extends from the start edge of the first line to the end edge of the Nth line.
2323
2323
2324
-
<p class="issue">Input from Japanese typographers would be very helpful.</p>
2324
+
<figure>
2325
+
<img src="CJK-Initial.001.png" width="480" alt="Diagram of Japanese initial letter in vertical writing mode"/>
2326
+
<p class="caption">Diagram of Japanese initial letter in vertical writing mode</p>
<p>The alignment constraints depend on the script used. In Japanese vertical writing mode, it appears that the initial letter extends from the start edge of the first line to the end edge of the Nth line.</p>
2401
2401
2402
-
<pclass=issueid=issue-91340f65><aclass=self-linkhref=#issue-91340f65></a>Input from Japanese typographers would be very helpful.</p>
2402
+
<figure>
2403
+
<imgalt="Diagram of Japanese initial letter in vertical writing mode" src=CJK-Initial.001.pngwidth=480>
2404
+
<pclass=caption>Diagram of Japanese initial letter in vertical writing mode</p>
<ahref=#issue-588d4c54> ↵ </a></div><divclass=issue>[The value <spanclass=css>replaced</span> is not strictly needed. <spanclass=css>Inline-box</span> also
3176
3181
does the job, except that it is not automatically restricted to replaced
3177
-
elements.]<ahref=#issue-90160bb9> ↵ </a></div><divclass=issue>Input from Japanese typographers would be very helpful.<ahref=#issue-91340f65> ↵ </a></div><divclass=issue>This figure is probably incorrect.<ahref=#issue-ddff256b> ↵ </a></div><divclass=issue>Add content describing constraint that the block container have a baseline grid (or fixed line-height?).<ahref=#issue-f229a1d3> ↵ </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>Define appropriate behavior for non-western scripts. The editors would appreciate any examples of drop initials in such scripts.<ahref=#issue-79d884e2> ↵ </a></div></div>
3182
+
elements.]<ahref=#issue-90160bb9> ↵ </a></div><divclass=issue>This figure is probably incorrect.<ahref=#issue-ddff256b> ↵ </a></div><divclass=issue>Add content describing constraint that the block container have a baseline grid (or fixed line-height?).<ahref=#issue-f229a1d3> ↵ </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>Define appropriate behavior for non-western scripts. The editors would appreciate any examples of drop initials in such scripts.<ahref=#issue-79d884e2> ↵ </a></div></div>
however the UA may adjust the alpha channel if it is opaque.
522
532
523
-
Issue: The wash requirement is a minor update on WebKit's behavior. Gecko & Opera just use the default selection color for the wash.
524
-
525
533
Issue: This whole section needs vocabulary cleanup.
526
534
527
535
<h2 id="generated-content">
@@ -569,6 +577,56 @@ Generated Content Pseudo-elements: ''::before'' and ''::after''</h2>
569
577
(<code>:before</code> and <code>:after</code>)
570
578
for these pseudo-elements.
571
579
580
+
<h3 id="alt-property">
581
+
Alternative text for Generated Content: The 'alt' property</h3>
582
+
583
+
The generated content of a ::before or ::after element is not always appropriate for assistive technology. In these cases, alternative text can be provided using the 'alt' property. The 'alt' property applies only to the same elements the 'content' property applies to.
584
+
585
+
<pre class=propdef>
586
+
Name: alt
587
+
Value: none | <<string>>
588
+
Initial: none
589
+
Applies to: ::before and ::after pseudo-elements
590
+
Inherited: no
591
+
Computed Value: as specified
592
+
</pre>
593
+
594
+
<dl>
595
+
<dt>none</dt>
596
+
<dd>No alternative text</dd>
597
+
598
+
<dt><<string>></dt>
599
+
<dd>The alternative text is the <<string>>. This can be the empty string.</dd>
600
+
</dl>
601
+
602
+
When the alt property computes to anything other than none, the alternative <<string>> should be used instead of the value of the contents property by assistive technology.
603
+
604
+
<div class="example">
605
+
606
+
Here the content property is an image, so the alt property is required to provide alternative text.
607
+
608
+
<pre>
609
+
.new::before {
610
+
content: url(./img/star.png);
611
+
alt: "New!";
612
+
}
613
+
</pre>
614
+
</div>
615
+
616
+
<div class="example">
617
+
618
+
If the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element. Here the ARIA attribute will be spoken as "collapsed". Without the empty string alt value, the content would also be spoken as "Black right-pointing pointer".
0 commit comments