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]

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

[Josh-Cena]

This is in CSS text level 4: https://drafts.csswg.org/css-text-4/#text-transform-property We need to update the spec link in BCD too. According to the compat data, math-auto is already supported, so we indeed should document this, which means adding this to the values list below, and one example of how it may be used. Do you want to do that?

[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!

[fred-wang]

Just FYI, as I think it does not matter much for MDN but the exact set of characters that are transformed is https://w3c.github.io/mathml-core/#italic-mappings

[Josh-Cena]

I did read that table and it looked like it's just Latin/Greek (+some variants like partial derivatives, variant greek, and dotless i/j), so I figured I could just handwave here.

[fred-wang]

This is fine, but I would use a .math-identifier identifier so we can more accurately tag math identifiers:

<span class="math-identifier">sin</span>

etc

In your example, browsers would actually try to perform the transform on any text node, not just math identifiers.

[Josh-Cena]

My goal is to show that math-auto is "smart" and only does the transform where necessary—otherwise why would we apply math-identifier to sin at all, when it would have no other semantic significance?

[Josh-Cena]

Going to merge this :) Thanks @fred-wang for the review