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: http://eepurl.com/UL0K9 free just for subscribers. This has previously 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.
Elegant 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 percentage (but not pixel-perfect). The superscript is achieved thusly:
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:
They’re also used in the square root symbol. Compare: √4 and √ via http://jsfiddle.net/qDZNB/
Custom-code your own when not covered by Unicode entities, such as available at htmlarrows.com. Compare the hand-crafted 1⁄6 with its Unicode equivalent: ⅙. The hand-crafted code is: <span style=&147;font-size: 55%; vertical-align:28%;&148;>1</span>⁄ <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.