Open r12a opened 1 month ago
@r12a For this use case, would text-transform: capitalize
or a new text-transform: capitalize-first
value work, or are there use cases that involve other aspects of styling?
text-transform: capitalize
doesn't work well — in fact, that's what i initially used, but it looked horrible, producing far too much capitalisation (such as 'At'), and destroying the semantics where, for example, lowercase 'factory' implies a generic use of the word rather than part of a name — it was actually called the 'Soho Manufactory', rather than the 'Soho Factory'.
Something like text-transform: capitalize-first
might work. I don't know what the pros and cons would be.
Let's say I only want to capitalize the first letter in the span:
<span style="text-transform: capitalize-first">
foo <b>bar</b> baz
</span>
Problem: <b>
inherits text-transform: capitalize-first
, so I will need to remember to reset it:
<span style="text-transform: capitalize-first">
foo <b style="text-transform: none">bar</b> baz
</span>
Problem: baz
inherits text-transform: capitalize-first
too, and it's not an element so I can't reset it.
I don't think it would match author expectations.
It's currently possible to use ::first-letter only with block elements. It would be useful to make it work for inline elements, too.
Example use case:
I've been developing an app to take information from a json database about family history and display it. The occupation of Thomas Lakelin is stored as the string "silversmith at Matthew Boulton's Soho factory". When displayed in the auto-generated summary (#1) no change is needed. In the key points column (#2), the initial letter is uppercased using ::first-letter, no problem. But at the top of the page (#3) i want to use the same string in an inline context, but still uppercase the first letter. To do so, i would need to resort to scripting. It would be much cleaner if i could simply apply ::first-letter to the markup around that piece of text.