Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
r12a opened this issue Oct 18, 2024 · 3 comments
Open

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

r12a opened this issue Oct 18, 2024 · 3 comments
Labels
Agenda+ Later Lower-priority items that are flagged for CSSWG discussion css-pseudo-4 Current Work css-text-4

Comments

@r12a
Copy link
Contributor

r12a commented Oct 18, 2024

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
Copy link
Collaborator

@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
Copy link
Contributor Author

r12a commented Oct 18, 2024

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
Copy link
Contributor

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.

@fantasai fantasai added the Agenda+ Later Lower-priority items that are flagged for CSSWG discussion label Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Agenda+ Later Lower-priority items that are flagged for CSSWG discussion css-pseudo-4 Current Work css-text-4
Projects
None yet
Development

No branches or pull requests

3 participants