[selectors4][css3-text] Plaintext Fallback Characters

In plain text you would type a vulgar fraction as “1 2/3”, “1 2⁄3” (fraction slash) or “1⅔”. The latter does not work well if that plain text is supposed to be a fallback from a richer markup language. You may want to use a different character than the normal space between integer and numerator, e.g. ‘_’, ‘+’, a non-breaking or a narrow space. If possible you may want to render the fraction stacked, i.e. with a horizontal bar in between numerator and denominator. Several markups are possible:

  <span class="frac">1&nbsp;<sup>2</sup>&frasl;<sub>3</sub></span> – HTML4
  <frac><int>1</int><num>2</num><den>3</den></frac> – arbitrary XML
  <mrow>1<mfrac><mn>2</mn><mn>3</mn></mfrac></mrow> – MathML, presentational
  <apply><plus/><cn>1</cn><apply><divide/><cn>2</cn><cn>3</cn></apply></apply>
  $1\,\frac{2}{3}$ – LaTeX
  {{frac|1|2|3}} – Wikipedia <http://en.wikipedia.org/wiki/Template:Frac>

All but the first one fall back to plain text “123” or, hardly better, “1 2 3”. The problem is that you have to type the separator and the slash, then remove them with “display: none;”. 

  <frac><int>1</int><fb>+</fb><num>2</num><fb>/</fb><den>3</den></frac>
  <mrow>1<mo>&#x2064;</mo><mfrac><mn>2</mn><mo>/</mo><mn>3</mn></mfrac></mrow>

If you, for whatever reason, cannot put them in selectable elements of their own, this is not possible with Selectors 3 and CSS 3, as far as I can see. Similar problems are posed by HTML’s infamous ‘q’ element and for the parentheses around ‘ruby’ fallback and in some mathematical expressions.

I wish Selectors 4 offered a solution to this, so markup languages wouldn’t have to, although I’m not sure how this would look like. The wiki page <http://wiki.csswg.org/spec/selectors4> only has proposals for ‘::quote-start’ and ‘::quote-end’, which is not enough or not generic enough.

  frac>::fence, frac>::operator, frac::space {display: none;}
  <frac><int>1</int> (<num>2</num>) / (<den>3</den>)</frac>

I’m not sure I would want to do this with ‘@text-transform’, although that could work:

  @text-transform invisible-fences    {convert: "( ) [ ] { }" to "";}
  @text-transform invisible-operators {convert: "_ + / * · ×" to "";}
  frac   {text-transform: invisible-operators;}
  frac>* {text-transform: none;}
  <frac><int>1</int>_<num>2</num>/<den>3</den></frac>

  @text-transform invisible-quotes {convert: "« » ‹ › \" „ “ ” ' ‚ ‘ ’" to "";}
  q      {text-transform: invisible-quotes;}
  q::before {content: open-quote;}
  q::after {content: close-quote;}
  <q>“Foo”</q>

PS: @text-transform visible-math {convert: "\2062 \2063 \2064" to "× , +";}

Received on Tuesday, 20 December 2011 12:09:49 UTC