Fractional Styles

Published 20 years, 10 months past

At the Web Design Meetup last week, Warren expressed annoyance that there are a limited number of fraction character entities.  I pointed out that you can use MathML to represent any fraction you like, but of course it requires a browser that supports MathML.  Those are kind of rare.

So absent MathML, it’s easy to get a nice presentation of, say, one quarter (¼, a.k.a. character entity ¼), but how do you get a similarly nice rendering of thirteen thirty-seconds?  As it turns out, you can at least get close with a bit of structural massaging.  (That sounds so much better than “structural hacking,” doesn’t it?)  Here’s what I came up with: 

span.frac sup, span.frac sub {font-size: 75%;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.15em;}
span.frac sub {left: -0.15em;}

17 <span class="frac"><sup>13</sup><b>/</b><sub>32</sub></span>

That results in the following, which I recreated using inline styles just to make life easier when I archive this post:

17 13/32

Not too bad, at least in Safari, Mozilla, and IE5/Mac, but not great.  In his own efforts along these lines, Warren uncovered the fraction-slash character entity (&#8260;), which could help improve the result.  I also notice that my numbers are bigger than the numbers in the original entity.  So I adjusted my styles, with the following result. 

span.frac sup, span.frac sub {font-size: 60%;
  font-weight: bold;
  vertical-align: baseline;
  position: relative;}
span.frac sup {top: -0.5em; left: 0.1em;}

17 13⁄32

So let’s compare the one-quarter entity to the styled version.

¼   1⁄4

There are font-family differences, I admit, but they’re pretty close to each other in the browsers I mentioned before.

The problem, really, is the markup involved, but I don’t see how one can really reduce it any further.  MathML’s representation of fractions isn’t noticeably less weighty, really, not even counting possibly required namespacing, which I’m not going to include here: 

<mfrac><mi>1</mi><mrow>4</mrow></mfrac>

I suppose that if I wanted to show arbitrary fractions a lot, I could represent them in MathML and then transform the math markup into HTML before delivering it to browsers.  I don’t have a lot of need for such fractions, at least not so far, but it was an interesting exercise.

Now for a little cleanup with regard to previous posts.

  • Chuq pointed out that iLife was never totally free, but that Apple was allowing updates to old versions at no cost.  In my case, iLife appeared to be free because it came installed on my OS X laptop, so I never overtly surrendered money for the product.  I suppose the cost is somehow built into the cost of the operating system.  Regardless, I still think that there was a bit of baiting and switching in letting people download major upgrades at no cost and then closing the gate.  I guess what I want is consistency; I didn’t realize I was benefitting from lax license enforcement, if that’s what it was.  I thought Apple was just making decent tools available for free to Mac users in order to draw more people to the Mac.  That would make some business sense, even if it isn’t what they were doing.  After all, I haven’t heard any plans to charge for upgrades to iTunes, and I don’t expect that I will.  Apple may be many things, but grossly stupid isn’t generally one of them.

    At any rate, I’d still be interested in paying for just an iPhoto upgrade, especially since I looked at some programs readers e-mailed me to suggest, and they were all either not what I wanted, or too darned expensive.  I imagine there are people who would pay to download GarageBand as a standalone, for example.

  • It turns out that there are a number of demonstrations of using behaviors to get PNG transparency in IE/Win.  Here are a few that people sent me:

    I’m sure there must be others.  Google could tell me, but I feel overloaded already.

Carolyn turns six weeks old tomorrow.  I’ll have to find a good picture to post, especially since so many people have asked for them.  She’ll get her own page sooner or later, but I’ve had other and much more pressing things on my plate.  As long as I have it ready by the time she wants to start blogging…

Comments are closed.