CSS rules that drive me crazy: non-hyphenation of capitalized words

Sometimes I spend an hour trying to figure out what is wrong with my code, only to finally figure out that this is a “browser feature“, not a bug with my CSS. According to https://www.w3.org/TR/css-text-3/#hyphenation

Correct automatic hyphenation requires a hyphenation resource appropriate to the language of the text being broken. The UA must therefore only automatically hyphenate text for which the content language is known and for which it has an appropriate hyphenation resource.

Authors should correctly tag their content’s language (e.g. using the HTML lang attribute or XML xml:lang attribute) in order to obtain correct automatic hyphenation.

The UA may use language-tailored heuristics to exclude certain words from automatic hyphenation. For example, a UA might try to avoid hyphenation in proper nouns by excluding words matching certain capitalization and punctuation patterns. Such heuristics are not defined by this specification. (Note that such heuristics will need to vary by language: English and German, for example, have very different capitalization conventions.)

For the purpose of the hyphens property, what constitutes a “word” is UA-dependent. However, inline element boundaries and out-of-flow elements must be ignored when determining word boundaries.

Any glyphs shown due to hyphenation at a hyphenation opportunity created by a conditional hyphen character (such as U+00AD SOFT HYPHEN) are represented by that character and are styled according to the properties applied to it.

But unfortunately that means that anytime we have stylized text in all uppercase, even though the css is doing the capitalization, it still won’t hyphenate.

example of the same source text as in the previous screenshot, but with text-transform:uppercase set:

I’m not the only one frustrated by this, as there is a long conversation going on here in the W3C working group: https://github.com/w3c/csswg-drafts/issues/5157. I particularly like one commenter’s perspective about how this is American-centric and totally breaks german: https://github.com/w3c/csswg-drafts/issues/5157#issuecomment-1105132362

Here’s hoping we get the ability to control this by setting some new properties or attributes.