Add text-transform: math-auto

[zhangenming]

Description

Motivation

It's mentioned below but it's not here so I think it's missing

Additional details

Related issues and pull requests

[github-actions[bot]]

Preview URLs

• /en-US/docs/Web/CSS/text-transform

External URLs (1)

URL: /en-US/docs/Web/CSS/text-transform Title: text-transform

• https://www.unicode.org/charts/PDF/U1D400.pdf (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-09-11 19:40:33)

[zhangenming]

https://drafts.csswg.org/css-text/#intro

But according to the full text of the specification there is no mention of this option so I want to know what is going on thanks

Or do I need to remove this option

[zhangenming]

If math-auto is not in the specification, maybe we should give a hint

[Josh-Cena]

When I said "examples" I meant an example on this page, but interactive examples are of course welcome :)

Could you update the values list right below this code too? And an example section.

[zhangenming]

I'm not confident that I can guarantee that the addition to the example will be appropriate

[Josh-Cena]

Maybe check https://w3c.github.io/mathml-core/#new-text-transform-values? The idea is to map normal ASCII letters to math italic characters.

[zhangenming]

i can't Not sure what to do need more help

[Josh-Cena]

I originally conceived of the following example:

<div>
  (sin&hairsp;<span>x</span>)<sup>2</sup> + (cos&hairsp;<span>x</span>)<sup>2</sup> = 1
</div>

div {
  text-transform: math-auto;
}

But in fact, using proper MathML markup, we get the same result out of the box:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

@fred-wang What is the intended use case of text-transform: math-auto, outside of being able to specify mi?

[fred-wang]

@Josh-Cena This italicization is something defined in MathML 3, when we wrote MathML Core it was suggested to expose the internal magic, so this is essentially what this CSS text-transform value is doing. I imagine, this could be used for italicization in math markup using HTML markup only, or to easily cancel italicization on single-char mi, but not sure these are strong use cases.

[Josh-Cena]

Yes, I imagined that this was implemented only so that MathML rendering can reuse CSS machinery, but it seems there's no real use case that can't be solved using MathML natively?

[fred-wang]

@Josh-Cena right, I'm not really aware of other use cases.

[Josh-Cena]

I've added some description and an example based on my understanding. @fred-wang Could you review? Thanks!