[css-text] Add sentence case via text-transform: sentence

[brandonmcconnell]

We often have to turn to JS when needing only the first non-whitespace character in a multi-word string capitalized. It would be great to be able to achieve this in CSS as well.

Basic Example

Usage:

<span style="text-transform: sentence">test test test</span>

Would render this:

Test test test

This is roughly equivalent to this example targeting ::first-letter:

::first-letter {
  text-transform: uppercase;
}

Considerations

• Should this capitalize the first character in every sentence and look for new-sentence characters in line with the current language in use, followed by a space? I will be using the terminator to describe any "end punctuation" (e.g. ., ?, !).

  What should this example render as?

  <span style="text-transform: sentence">test test test. test test test!test test test?test? test.test</span>

  Several options:

  • Test test test. test test test!test test test?test? test.test
    • only first non-whitespace char, simplest solution
  • Test test test. Test test test!Test test test?Test? Test.Test
    • start + after all terminators
      • first non-whitespace char
      • every first non-whitespace char after a terminator
  • Test test test. Test test test!test test test?test? Test.test
    • every natural sentence start
      • first non-whitespace char
      • every first non-whitespace char after a terminator + whitespace (whitespace after terminator required)

• Assuming this is implemented and with some special cases for multiple sentences (the previous consideration), should this special casing also apply to quotes by default? I will be using, but assume that this may support some/all quotation styles— ', ", `.

  What should this example render as?

  <span style="text-transform: sentence">test 'test test. test' test, 'test'</span>

  Several options, again:

  • Test 'test test. Test' test, 'test'
    • no capitalization of quotes by default
  • Test 'test test. Test' test, 'Test'
    • capitalization of quotes after comma and quote but not without comma
  • Test 'Test test. Test' Test, 'Test'
    • capitalization of first chars in all quotes (no comma needed)
  • Test 'Test test. Test' test, 'Test'
    • capitalization of first chars in all quotes, but not if there is leading whitespace inside quote (ambiguous with apostrophe vs. single quote)

• How will we conduct locale research to ensure this supports all locales. Are there any gotchas with the locales introduced even with the simplest of uses (same as ::first-letter { text-transform: uppercase })

• Should there be any method for purposely escaping characters not desired to be capitalized?

• Should which quotes are capitalized (if any) be a configurable setting, via another property?

[bleper]

If #3132 is accepted, there will be no need for all the questions raised.

[brandonmcconnell]

If #3132 is accepted, there will be no need for all the questions raised.

Thanks for link! Agreed— that might solve quite a bit of this. So maybe a more simplistic implementation of this would be best, as I still think there's a place for sentence case in the standard text-transform values. 🙂

I'd love to see that other spec hit too.