Solving Hard Problems: Software, Part II 1

The Cascades aren’t just in Washington State these days

This week we’ll switch from search strategies in off-line documents to a couple of web nuances that you can actually see in last week’s post.

In the aftermath of the Turkey Feast we in the US call Thanksgiving, a tweet sent me to the light-hearted GEICO ringtones page. Right there in the text, glaring like a sore thumb you’d bitten into instead of a turkey drumstick, was a circle-R, ®, the registered trademark symbol.

Cascading Style Sheets to the Rescue

A quick bit of CSS can dramatically improve the appearance of the registered mark, so that it “fades into the background” of the reader’s attention, the way that it would with superscript in traditional text. One solution is the “vertical-align: top” option within a span.

I’ve toyed with the opening and closing span tags so that it will not “fully render” (compare to the above):

<span style="font-size: 7px; vertical-align: top; font-weight: bold;">®</span>

In the text last week, I was describing ’bout how Post-It® notes allow us to mark cool stuff in real printed books. (Notice that they invented the Note, but they’re not spiffy enough to grace their pages with this cool code. Somebody should tell ’em I said so…)

With this slight change, you maintain your intellectual property & use-in-commerce claim, your trade mark and branding status without the web-wonky line-height changes that the superscript tag would cause.

A Centering Exercise w/o Yoga

Later on in the example, I needed to emphasize the enveloping characters from the contents, so again, CSS to the rescue!

Use the “vertical-align: percentage” with the rule-of-thumb, start the % at half the point size, to keep everything centered, (here you’ll see it’s 3/8ths). Your mileage may vary, so experiment a bit. 🙂

<span style="color: #003145; vertical-align: -18%; font-size: 48px; font-weight: bold;"><</span>our stuff here<span style="color: #003145; vertical-align: -18%; font-size: 48px; font-weight: bold;">></span>

Which in fully rendered splendor looks thusly:

<our stuff here>

So, these are just two short and sweet tips to polish your pages. There are many other CSS examples available on the web to bring more of that typeset excellence that makes old books such a treasure. Enjoy!

Until next time,

Carpe Diem!


One comment on “Solving Hard Problems: Software, Part II

  1. Pingback: Solving Hard Problems: Software, Part III « Matt Weilert's blog

Leave a Reply




This site uses Akismet to reduce spam. Learn how your comment data is processed.