@@ -423,6 +423,10 @@ Text Processing</h3>
423
423
It has no effect on the underlying content,
424
424
and must not affect the content of a plain text copy & paste operation.
425
425
426
+ Note: The 'text-transform' property only affects the presentation layer;
427
+ correct casing for semantic purposes is expected to be encoded
428
+ in the source text.
429
+
426
430
<wpt>
427
431
text-transform/text-transform-copy-paste-001-manual.html
428
432
</wpt>
@@ -558,6 +562,53 @@ Text Processing</h3>
558
562
<pre> abbr:lang(ja) { text-transform: full-width; }</pre>
559
563
</div>
560
564
565
+ Note: The purpose of 'text-transform' is
566
+ to allow for presentational casing transformations
567
+ without affecting the semantics of the document.
568
+ Note in particular that 'text-transform' casing operations are lossy,
569
+ and can distort the meaning of a text.
570
+ While accessiblity interfaces may wish to convey
571
+ the apparent casing of the rendered text,
572
+ the transformed text cannot be relied on accurately represent
573
+ the underlying meaning of the document.
574
+
575
+ <div class="example">
576
+ In this example,
577
+ the first line of text is capitalized as a visual effect.
578
+
579
+ <pre highlight=css>
580
+ section > p:first-of-type::first-line {
581
+ text-transform: uppercase;
582
+ }
583
+ </pre>
584
+
585
+ This effect cannot be written into the source document
586
+ because the position of the line break depends on layout.
587
+ But also, the capitalization is not reflecting a semantic distinction
588
+ and is not intended to affect the paragraph’s reading;
589
+ therefore it belongs in the presentation layer.
590
+ </div>
591
+
592
+ <div class="example">
593
+ In this example,
594
+ the [=ruby=] annotations,
595
+ which are half the size of the main paragraph text,
596
+ are transformed to use regular-size kana
597
+ in place of [=small kana=] .
598
+
599
+ <pre highlight=css>
600
+ rt { font-size: 50%; text-transform: full-size-kana; }
601
+ :is(h1, h2, h3, h4) rt { text-transform: none; /* unset for large text*/ }
602
+ </pre>
603
+
604
+ Note that while this makes such letters easier to see at small type sizes,
605
+ the transformation distorts the text:
606
+ the reader needs to mentally substitute [=small kana=]
607
+ in the appropriate places--
608
+ not unlike reading a text in English
609
+ with all “s” characters substituted by “f”.
610
+ </div>
611
+
561
612
<p class="note">
562
613
Note: As defined in <a href="#order">Text Processing Order of Operations</a> ,
563
614
transforming text affects line-breaking and other formatting operations.
0 commit comments