Supporting `calc(100% + 0.333em)` in the `width` attribute of `<mpadded>`
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 56
- Forks
- 20
- PR merge metrics
- No merged PRs in 30d
Description
<mpadded> is only really useful for horizontal spacing when it's possible to add something to the width. For example, if one sets lspace on <mpadded> but does not change the width, then the lspace eats into the width of the content.
MathML 3 had the width="+0.333em" notation for this (with + as the prefix) but this was apparently replaced by a new notation in MathML 4, see this example:
<mrow>
<mi>x</mi>
<mpadded lspace="0.3em" width="calc(100% +0.6em)">
<mi>y</mi>
</mpadded>
<mi>z</mi>
</mrow>
The problem for MathML Core here is that the 100% here refers to the width of the child, and not to the width of the parent, as is the case in CSS.
But there is actually a solution in CSS, with the newly proposed calc-size function. The following actually works correctly in Chrome (which is the only browser currently implementing calc-size):
<math display="block">
<mi>x</mi>
<mpadded lspace="0.16667em" style="width: calc-size(min-content, size + 0.33333em)">
<mi>sin</mi>
</mpadded>
<mi>θ</mi>
</math>
So, I think the spec should be either changed so that:
widthon<mpadded>accepts any CSS value (currently only allowslength-percentage), so that the newcalc-size()can be used there- support for
calc(100% + 0.333em)is explicitly hard-coded in the spec and is internally translated tocalc-size() - (as David says below)
widthacceptscalc-size()in addition tolength-percentage
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the MathML Core definition of the width attribute and the linked MathML 4 example, then compare the proposed calc-size() behavior in CSS. Done means the specification resolves one of the three proposed approaches and clearly defines the accepted syntax and child-relative sizing behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100