Make your postings highbrow with drop cap

Or, Drop Cap: another stupid JavaScript trick.

A "drop cap" is one of the more exotic pyrotechnics in the typesetter's aresenal. You often see it in highbrow magazines like the New Yorker where the first letter of an article is oversized, or boxed, or surrounded by a design. It's simply a way to start an article out with a flourish. In the old days, they simply put in a block for the big initial and arranged the other letters around it.

But working in HTML, I found it wasn't simple at all. If you just specify the font of the first letter as "font-size: x-large;", it will render larger, but it won't "drop down" into the lines of text as it's supposed to.

Lorem ipsum quia dolor sit amet

After some poking around on the Internets, I found a way to do it using JavaScript. At first I thought it was too much coding for what you got out of it--but then, so is pretty much any coding on a sophisticated web page. In the final analysis, yes, it's a stupid JavaScript trick to fancy up your blog postings, but it's also a fairly simple, elegant example of using a JavaScript class, which defines a CSS style, and is located in the head of the web page.

This is the JavaScript I'm currently using:


<style type="text/css">
.dropcap { font-family: "Book Antiqua", serif; font-size: 3em; float: left; border: 1px double #000000; padding: 10px; margin: 0 5 0 0; }
</style>

<span class="dropcap">L</span><span style="font-family: &quot;Trebuchet MS&quot;, sans-serif;">orem ipsum quia dolor sit amet<span>


It renders as follows:



Lorem ipsum quia dolor sit amet

Who's afraid of javascript:void()?

Very few people, apparently. It's used all over the place. In fact I had been using that old chestnut, javascript:void(0), for quite some time to implement popups on my blog. I'd read somewhere that this is considered bad coding practice, but I didn't know exactly why. So, kids, if you take away nothing else from this article--learn this worldly lesson: you can find the solution to just about any coding issue by searching on Google.

You can search, but the results usually answer your question obliquely. After reading a few blog posts, I finally found out why you should avoid void(). (In the interest of full disclosure, the clearest of these articles was Javascript href Voids and More.)

There are good parts and bad parts to JavaScript; it is in fact a full-fledged, object-oriented language, but it has features that allow you to write code sloppier than a 4-year-old plowing through a Big Mac. One of these pitfalls is using void() in a link, because it's an easy hack. The technical reason to avoid void(0) is that it can produce indeterminate results on some browsers, or when Javascript is disabled on the browser.

So let us say that we'd like to implement a popup that provides the English translation of a German word. The following script uses void(0) to generate a popup saying "German for 'so-called'" when you put the mouse over the word "sogenannte:"

<a href="javascript:void(0)" title="German for 'so-called'"><em>sogenannte</em></a>

Try it by positioning the mouse over the word below:

sogenannte

Here's the preferred method: Instead of using void(), set href to "#", which is a kind of shorthand meaning "this page." Handle the onmouseover event by returning false. Also disable clicking on the link by making the onclick event return false:

<a href="#" onclick="return false;" onmouseover="return false" title="German for 'so-called'"></em>sogenannte</em></a>

Now position the mouse over the following link:

sogenannte

Using '#' as a substitute for the void() function is supported by all major browsers and is considered to be the correct method. If you're concerned about how this would behave when Javascript is disabled in the browser, you can replace '#' with a valid URL; a good choice is to insert the URL of the same page on which the link resides. The user will see a refresh, but will stay on the same page.

Obligatory mission statement

Cutting edge, c.800 AD

"Tatoeba" (例えば, pronounced ta-to-ay-ba) is a Japanese word meaning "for example." The purpose of this blog is to demonstrate the principles of effective and clear technical communication, using canonical examples of code. It's not meant to be a razor-sharp cutting edge font of the latest coding techniques--I'd be the wrong person to impart that wisdom, though I have no shortage of strong opinions on what constitutes good technical writing.

Do come up and see my snippets!

I got the idea to create this blog from a good friend who started posting snippets and examples from his own projects--whatever happened to interest him at the time--on his excellent blog, TravelMarx (shameless plug). He recognized the problem with relying on writing samples that are published online: they don't belong to you, so they can be (and usually are) subsequently updated. In extreme cases, they don't much resemble what you wrote. Of course you can always save a portfolio of writing samples, but referring people to your work online is la nouvelle mode.

Because it also serves as a portfolio of technical content I've written, this blog will contain code in the languages with which I'm familiar: C++, C#, and Javascript.