Monthly Archives: March 2017

Scripting Saturdays, week 6: Cross-platform Content

Flourishes to bring on-line closer to the polish of a printed work.

As we wrap up this six-week series, we’ve alternated between pure writing topics and the marketing for that writing. In this final installment, we invite you to sign-up for the Elegant eMail Web Cookbook: free just for subscribers. This has pre­vi­ously only been available via the Elegant eMail seminars, so consider this a Lenten gift! As an extra bonus: multi-lingual hyphenation, to deliver responsive line-fitting across multiple devices!

In the cookbook terms will be fully explained, while we just give top-line teasers & bread-crumb hints here.

superscript & overbar examplesElegant superscripts, covered in this 6th week don’t distort your line height, and so avoid ugly and hard-to-read gaps in your text. Start with vertical-align:38%; to give topline height on both Opera and Firefox. Adjust as needed for your target audience. (We actually used 28% here, so your mileage may vary!) It’s easier to use “text-top” instead of per­cent­age (but not pixel-perfect). The superscript is achieved thusly:

6<span style="font-size: 0.95em; font-variant: small-caps; line-height: 0.95em; vertical-align: 28%;">th<span>



Overline characters (special positioning unicode) such as the example Dokkōdō, tuck the diacritic glyph overbar snugly above the letter o, again so that the line height is not disturbed as it would be with CSS.

As faintly visible in the image above, the overline is achieved with the overbar|overline html entity ̄ following the letter it will overline:  Dokko&#772;do&#772.

They’re also used in the square root symbol. Compare: √4 and √4 via


Vulgar fractions

Custom-code your own when not covered by Unicode entities, such as available at Compare the hand-crafted 16 with its Unicode equivalent: ⅙. The hand-crafted code is: <span style=&147;font-size: 55%; vertical-align:28%;&148;>1</span>&frasl;&nbsp;<span style=&147;font-size: 55%;&148;>6</span>



STEM (hover over the word to see the acronym spelt out!) is achieved by <acronym style="font-size: 1.125em; font-variant: small-caps; line-height: 0.95em; text-transform: lowercase;" title="science, technology, engineering and maths (as the Brits would say with a plural)">STEM</acronym>

To learn more advanced techniques such as scalable bullets, (pure css, no images), service marks, and the advanced techniques of how to insert your email “read more” tag within a sentence, sign-up for the Elegant eMail™ cookbook. It’s free! That rumor about Spiro Agnew impersonators calling you at dinnertime is just #fakenews.

So keep #amwriting, whilst learning a bit of coding to polish your multi-channel communications.