search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 660 forks source link

[css-text] Make first-letter work with inline text #11047

Open r12a opened 1 week ago

r12a commented 1 week ago

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.

lakelin_silversmith

fantasai commented 1 week 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?

r12a commented 1 week ago

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.

Loirooriol commented 1 week ago

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.