Skip to content

Commit 00ad751

Browse files
committed
[css-text-3] Initial draft proposed clarification to text-transform interaction with semantics. #3775
1 parent df0020d commit 00ad751

File tree

1 file changed

+51
-0
lines changed

1 file changed

+51
-0
lines changed

css-text-3/Overview.bs

+51
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,10 @@ Text Processing</h3>
423423
It has no effect on the underlying content,
424424
and must not affect the content of a plain text copy &amp; paste operation.
425425

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+
426430
<wpt>
427431
text-transform/text-transform-copy-paste-001-manual.html
428432
</wpt>
@@ -558,6 +562,53 @@ Text Processing</h3>
558562
<pre>abbr:lang(ja) { text-transform: full-width; }</pre>
559563
</div>
560564

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+
561612
<p class="note">
562613
Note: As defined in <a href="#order">Text Processing Order of Operations</a>,
563614
transforming text affects line-breaking and other formatting operations.

0 commit comments

Comments
 (0)