Twilight Universe

When it’s a prime.

No that isn’t a very unfunny joke, it’s actually a good description of a problem with typography on the web. Typography has evolved on the printed page over several hundred years, recently much of it has been ignored on the web.

I’m going to explain how you can use correct typography on the web, and how this will lead to a more readable web page, and readability means a more enjoyable experience for a user.

What This Article Aims To Do…

By the end of this, if I do my job right, you should know more about correct typography in documents, and how to use it in your web pages. Not only that, but you should also have a useful visual reference for all of them.

…And What It Doesn’t.

I’m not trying to write an English essay here, I’m trying to show you practical examples of how typography works. At the end of the day it should make your document more readable, and professional looking, not provide an academically accurate typography essay.

While some of the fine details may be glossed over, you should get all you need to know to use the characters properly, and how to insert them in html documents.

So What’s This Prime Thing?

What is normally perceived as the double quote (the ” character, normally above the number two on a keyboard) is often rendered as a double prime, what you should be using for inches. The apostrophe is also often incorrectly substituted for a single prime—used for feet—or a single quote.

Feet and inches aren’t the only applications for the primes, but they are the most common.

The two straight lines in this character are quite fine for coding or similar uses (like when used to surround attribute values in HTML), but they are typographically incorrect. This character is actually a single uniform general quotation mark—quite similar to what is rendered in many fonts as a prime—called the APL quote.

HTML does allow correct rendering of both single and double primes, and they do (when correctly rendered) look different to the APL-quote and apostrophe, but I will cover that later.

This is more a typographical issue than technical though, and whether your text editor uses primes or the APL-quote both are still incorrect for text presentation. You should be using single or double quotes.

But They Look The Same!

Not really, but some applications convert the APL-quote into the correct double quotes, and the apostrophe into single quotes as that is what you usually want. Microsoft Word does this for example. This can create problems of its own though—like putting in primes for feet and inches, or inserting a correct apostrophe.

However there is a visual difference. Allow me to illustrate:

“This is how you are probably used to seeing quotes on the web. Notice the shape of the character at either end. The same character, and straight lines.”

“However this text is in double quotes, note the obvious visual difference. Also notice how they are actually two different characters. One is an opening quote and the other is for closing the quote.”

Proper quotation marks are more readable, there’s five hundred years of typography to prove that. They make your text flow across the page nicer and they are more pleasing to the eye.

Not to mention its actually the correct thing to use!

But… Who Cares?

Well, as it is an integral part of typographical standards, correct layout, and good general presentation… you should really.

These conventions make your text look smarter, more legible, more professional. It also makes you the writer look like you know what you are talking about, as it is a more professional presentation. As another point of note, single quotes should also only ever really be used when quoting within an existing quote.

However quotes aren’t the only thing that suffer from being misused or neglected. Hyphens, ellipsis, and numerical symbols are all misunderstood on the web.

Dash It All.

A hyphen isn’t a dash—and vice-versa—but it is commonly used in place of the correct dashes on the web.

The actual character rendered by the hyphen/minus key on your keyboard is called, appropriately, the hyphen-minus. It is a bit of both and totally neither, however it is much more appropriate for a hyphen than a minus, as it lacks the length needed for the minus. Use it for a hyphen, as it looks almost the same, but never for a minus.

Equally the only correct application for a hyphen is the one used above—to split a word in the correct place. Examples of such are the words ‘re-read’, ‘vice-versa’, or similar split words.

The Em Dash
If you’ve spent anytime looking into CSS then you will have probably come across Em’s before. An Em is described as the width of a capital M. In practice that may vary a bit depending on the font, so it is more standard for the Em to be the same width as the number of points it is being displayed as—so it is 12 points wide when displayed at 12pt.

Can you guess how wide an Em dash is? Thought you might be able to.

Its uses are pretty well defined. It can be used instead of a colon or semi-colon to link clauses, or as a substitute for unknown date ranges (like 1980—, for someone’s birth date where the death is unknown or 19— for an incomplete date). Also two adjacent Em dashes (a 2-em dash) are used to indicate missing letters in a word. For example, censoring letters in swearwords.

The most common uses of an Em dash however are to show a break in thought, or a parenthetical statement that is more significant than regular brackets would indicate. You can see the em dash at work above, parenthenising the ‘and vice-versa’ in the first paragraph.

The En Dash
The En is the half the size of an Em (in theory the width of a N). Some people like to use an En dash surrounded by spaces instead of an Em dash, which is valid, but there is little point in using it that way.

Its most common use is to substitute for the word “to”, or to indicate a range of almost any sort (like the London–Glasgow railway line, or 1–100).

Some applications of it might be to show sports scores, dates, document pages, or just for correct range display. Certainly you should use it in any numbered range.

The Ellipsis.

You know when you see those three periods together (like so…) that there is actually a proper character for that? Well there is, its called an Ellipsis.

The ellipsis should be used to indicate missing text in a quotation, or that a quotation trails off. Like so:

“Two households, both alike in dignity,
In fair Verona, where we lay our scene,
From ancient grudge break to new mutiny,
Where civil blood makes civil hands unclean…”

Note that it does actually looks subtly different to three periods. There are some rules with the ellipsis, but it is enough to know that if you are cutting out text from a quote, or trailing off then you should use it.

Math Symbols.

There is an annoying trend for, even in professional publications, using an x or * for multiplication, a slash for division, and a hyphen for subtraction. This convention comes from the coding world—and is fine to use when you are dealing with code or similar works—but shouldn’t be used in general practice.

See the following comparison:

3×10-6=48/2

compared with:

3×10−6=48÷2

While the slash might be useful in certain cases, for fractions or similar displays, the multiplication and minus symbols are a lot clearer in the latter case. It was for this reason I recommended against using a hyphen for the minus symbol earlier.

Other Symbols.

Not a day goes past without seeing someone substitute (TM) for ™ and (C) for ©, not to mention (R) for ®. Why this continues I don’t know, not only does it look clumsy, it also can be dangerous to the person that uses them.

None of the above substitutions have ever been given legal force or merit so, in some countries, there could be potentially damaging legal problems for someone who used the above substitutions.

However the characters are east to reproduce in HTML, so there should never be this problem.

Ok Genius, How Do I Get These Things In My Web Page?

Good Question. There isn’t much point knowing about these things unless you have a practical way of using them.

The answer is pretty simple too. You use decimal entity codes.

I Use What?

Decimal entity codes.

Entity codes come in three flavours—named, decimal, and hexadecimal. All of them start with the & character. The named ones used a & followed by a name, the decimal use &# followed by a number, and the hexadecimal use followed by the hex value of the character. All of them end in a semi-colon.

For example to produce the < character you could use < < or <. Whichever you use is up to you, however there are browser issues to consider.

Most browsers don’t fully support named entitles—or only support a small commonly used set—and support for hexadecimal ones is even worse. However all browsers seem to support decimal notation.

If your text editor supports UTF-8 encoding, and your document is set up to use it (it’s the default for XHTML and XML documents) then you don’t have to worry about inserting a lot of the codes as the characters will display normally. That is.. IF it does support it, as many don’t. However there are also the same browser issues to consider here, not to mention that many text editors don’t support UTF-8, or unicode at all, sadly.

If you don’t know what UTF-8 is, or are unsure if your document or text editor supports it, I would recommend using decimal notation. I would recommend using decimal codes as good general practice anyhow, unless you know a named entity is supported (like   the non-breaking space is, the & character - & - or the above less-than symbol). Since HTML 3 a certain set of named entities have been standard, past those… you are on your own.

HTML Code Reference.

Please note, these are the correct codes for you to use. Far, far too many books and articles online quote the wrong codes. All the ones below are verified and work correctly. Note that the named entities are case sensitive, and that the APL-Quote is provided for reference.

Hopefully these codes should make using the correct typography easier in your documents.

Good News For DreamWeaver Users.

Yes oh Macromedia converts, if you have DreamWeaver MX then its symbol entities are correct, and it will even convert between the APL-quote and the double quotes automatically if you are in design view.

However if you use DreamWeaver 4 or below please be aware that it inserts incorrect entities, and also contains some other bad code (like broken or invalid DocTypes for example). Time to get that upgrade perhaps?

At least they got it right in the end (mostly).

At The End Of The Day.

Hopefully the advice and instruction I’ve given here has informed you about how to use correct typography in your web pages. I don’t pretend I use all of it all the time, but knowing that it is there is they key to being able to construct a professional looking, and reading, web site.

Armed with this knowledge you should create more readable and pleasant content for your users. Also your pages should make the transition to print much easier, something that can be also greatly improved using style sheets.

However, that is a topic for another day.

Ken Silverman corrected me in reference to his PNGOut utility that I used in my recent PNG article. I had stated that PNGOut was a - “Quite popular implementation of the Libpng code library…” and I was wholly incorrect as it turns out. As Ken himself puts it:

“I have never used libpng or zlib. I wrote my own library from scratch based on public documentation of the format. It was a lot of extra work on my part, but I think it was worth it. This is why PNGOUT behaves differently than most other PNG applications (in size, speed, etc…)”

Mea culpa, mea culpa.

Or to take a line from The Gospel Of Buffy - My bad.

I had been reading so much about Libpng I guess my mind ran off with me, whoops. I’m glad he corrected me, as I wouldn’t want his hard work to be attributed to someone else, and I think the results show that it was indeed worth it.

However an interesting side effect of this was that Ken was moved to action to play with his own utility. He found something very interesting, and an equally interesting solution:

“Using my current version of PNGOUT, I was not able to compress unionjack that small! So I did some research. PNG Gauntlet includes an old version of PNGOUT. I’ve made some changes to PNGOUT since then. […] I learned that the thing that made the biggest difference was the palette order. In the version you used, PNGOUT preserved the palette order if the input was a PNG file using a palette. My current version (now old) re-generated the palette (changing the order of palette entries) no matter what. It turns out unionjack.png was one of those files that compressed better with the original palette order - about a 100 bytes better.

The point is, your sample inspired me to make some changes Now, PNGOUT works like this: If you put /c3 on the command line, it will generate a new palette. If you omit /c3, it will preserve the palette order. The difference now is that you can choose what you want. As a bonus, PNGOUT now defaults to paletted files when the input is a .GIF file.”

Well… wow. I’m glad that something I wrote will have a positive effect on PNGOut and PNG users in general. I could not be more pleased right now.

Ken also sent me a new Union Jack image that he’d managed to compress using his new version down to 2.95kb (3030 bytes), that version is now the one on display in the article. Forever getting smaller, I wonder if we can get it down to below 3000 bytes, anyone want to take the challenge?

You can get the Out here at Ken’s website.

*UPDATE 17/9/2003 - Corrected some minor errors. Also this article has helped contributed to the development of PNGOut.

One of the sad things about web standards is that they aren’t. Various browsers implement the standards in different ways, or in many cases, fail to implement them properly. The most notable failure is Internet Explorer, even the new version, but Gecko based browsers (Mozilla, Netscape, etc) still have serious issues, not to mention other browsers.

One weird browser inconsistency is the implementation of PNG files (pronounced ‘ping’). PNG is a format that has been around for a long time, and I am a great fan of, but still isn’t used as much as it should be. If you don’t know about it – you should do.

PNG’s Are Better Than GIFs.

There, I said it. It’s a statement based on fact. PNG supersedes GIF in almost every way, the only exception is animation, which PNG doesn’t support (though its companion format MNG does). There’s no quibbling about this, its cold hard fact. I’m going to illustrate this with some tests I’ve performed, but first a little history for those that may not know much about PNG.

PNG is a replacement for GIF (pronounced with a soft g like in gerbil – ‘jif’, not ‘guh-if’ – so says the creator of the format.) which you all should have heard of. It was designed because Gif was getting very old (created in 1987) and was really out of date in ’95 when the PNG specification was drawn up. Another factor was that UniSys decided to start calling in licensing charges for the LZW compression that Gif uses, it hadn’t before… and so a free format was born.

Implementation of this format was slow however. Currently all browsers support the display of PNG files, but not all of the features of the format.

What Are PNG’s Features?

• Lossless Compression – Unlike JPEG which throw away data and guess how an image is composed, PNG compression never throws away information. This avoids the artefacts and blurring you often find in JPEGs.
• Multiple Bit Depths – While GIF is commonly only supported in 8bit palettes (256 colours) and JPEG is only 24bit (16.7 million). PNG supports any bit depth to the power of two – from 1bit (2 colours) to 48bit (too many to even count). Though the most common formats are 8bit and 24bit. However it must be stressed PNGs at depths over 8bit were designed for perfect lossless archival quality with good compression, and are not designed to compete with JPEG for 24bit web use.
• Gamma Correction – Gamma correction, in applications that support it, ensures images appear the same across all platforms. Even across Windows and Macintosh there is a large difference in display.
• Alpha Information – PNG supports multiple modes of transparency. Alpha channels for 24bit images, RGBA for palette images (where not only a value for Red Green and Blue is stored, but one for Alpha), and binary (GIF style – either transparent or not) transparency.
• Interlacing – PNG supports interlacing (progressive display of images while they are loading) like both GIF and JPEG. It works in a different way to GIFs and is considered one of the better interlacing display methods available.
• Smaller File Sizes Than GIFs – PNGs compression algorithm is better, and produces smaller files than GIFs for 8bit images. At least.. it should, as I will soon demonstrate.

But… Why Should I Use It?

Simply because, as I’ve said before, its better. File sizes are usually significantly smaller, and that means lower bandwidth and shorter download times. For the web these are the primary reasons for any choice of format. It’s that simple – PNGs will save you bandwidth, and hence money, in the long run.

Much is often made of the lack of browser support for PNGs alpha transparency in some browsers (well.. just IE/Win I think now, IE/Mac does a fine job). This is missing the point – for GIFs are surviving on binary transparency just fine, and everyone still uses them – an outdated format that is over 16 years old!

While the artistic and design community may want to have better transparency, we can cope – for now at least – with doing it the way GIF has done. The more support PNG has, the more incentive for developers to support its features, like alpha palettes. The more we use PNG, the less we rely on old outdated GIFS.

I Thought PNGs Were Larger Than GIFs.

Not at all! Or at least, they shouldn’t be. This is a myth that is spread mostly because of the appalling compression in Adobe PhotoShop. Really.. its that bad. PNG leaves some room to manoeuvre with how a program compresses the files, Adobe has obviously not tried to optimise things at all. Things did improve with their ‘Save For Web’ option (basically using the code from ImageReady) but it’s still the worst around.

However, there are many ways to fix that, even with files that have already been saved.

The Software

This is the software I’ll be using to illustrate the benefits of PNG compression. I have separated them into freeware utilities, and commercial applications. The main difference being that the freeware software needs a PNG file to work with, while using the commercial software I can work from any file.

The following are commercial applications:
Adobe Photoshop – The standard for graphics software.
Web Image Guru – A suite of utilities, including a plug-in for Adobe PhotoShop that mimics the Save For Web features. Apparently has excellent compression.

The following are freeware utilities:
PNGCrush – the original, and now standard, for PNG compressing utilities.
OptiPNG – Similar application to PNGCrush, claims it has “a wider automatic search space (which may lead to a better compression factor), and it runs faster.”
PNGOut – A self coded utility, written by Ken Silverman (of 3D Realms fame). Claims to beat PNGCrush significantly.
PNGRewrite – Not really a compression program. PNGRewrite aims to optimise the palette of the file (bit depth, palette order, transparency info.. etc) not optimise the compression, and hence reduce the file size. In theory this should be done in any application, but most don’t perform well.

The freeware apps are all command line apps, but for PNGOut and PNGRewrite I’ll be using a free windows shell for them called PNG Gauntlet. All this does is provide a friendly windows interface for the two programs. To run PNG Gauntlet you need to have Microsoft .NET 1.1 installed, but many people do now anyhow.

This is the image I’m using –

A simple image of the Union Jack, clean colour space, with some anti-aliasing between the colours. it’s the kind of image that is ideal for 8bit palettes, and the sort of thing that might realistically be on a web page. Moreover – it is the exact kind of image someone might save to GIF. Perfect for what I’ll be testing.

Both the PNGs and the GIF are saved using Adaptive palettes. While Perceptual can often be better with complex images, Adaptive performs best at lower bit depths and simpler images.

The GIF of this image is 4.62 KB (4,734 bytes), around what you would expect.

I created this image in PhotoShop initially, so it made sense to test out Web Image Guru (WG) and PS first. Equally the other utilities only work on existing PNG files.

PS Test - 5.73 KB (5,870 bytes)
WG Test - 3.16 KB (3,236 bytes)

Woah, that’s a huge difference! Surely that can’t be all down to compression?

No, its not. After a look at what was going on I noticed that PS was including a full 256 palette entries, while WG said there were only 99 colours needed. Indeed a per pixel comparison confirmed this.

Lowering the number of colours in PS produced the same image, but with a lower file size. Interestingly I found that saving the image to BMP (24bit), opening the file, and then saving for web made PS agree that there were indeed only 99 colours.

Obviously there is something in working from its own format that causes PS to act strangely when saving to web. Here’s a comparison with the new file

PS Test 2 - 4.12 KB (4,225 bytes)
WG Test - 3.16 KB (3,236 bytes)

1.5kb removed, just by doing something that PS should be doing itself. From here I decided to compare the optimisation utilities on both the PS tests and the WG test as they are produced from the same base file.
N.B. – Web Guru can optimise files by itself, not using the PS plug-in, and managed to optimise the original PS test. However as it only managed to optimise it down to 130 colours the image would appear to not contain the same information. The new files are exactly the same in contents, and so a fair comparison can be achieved. It is rather worrying that the original PS saved image appears to introduce colour information into the image.

Final Results.

In Red are images that are larger than the GIF,
In Green are images that are smaller than the GIF.
In Blue is the smallest file.
In Purple are files of note.

PG test on PS1 – Note that this is the smallest file from the original PS test, but it is still larger than the GIF. Its seems that PhotoShop PNGs saved using the default options are hard, and in this case impossible, to reduce down to a level below GIFs. Probably due to the redundant (or possibly introduced) colour information. This is totally unsatisfactory in such an expensive and supposedly standard application.

PC test on WG – Note that PNGCrush actually increases the file size of the image. While it decreased file size in the case of poorly compressed images, it still performed the most poorly overall, however it is the oldest utility on test.

PR test on WG – PNGRewrite also increases the file size, but in this case by a significant amount! It may be that the original file was already better ordered than PR can achieve, however this is still puzzling.

Best PNG file size = 2.97kb (3,044 bytes)
Total PNG saving over GIF = 1.65kb (1,690 bytes) a saving of 35%

Ok, its smaller, so what?

Well, smaller files mean faster loading page, less server space being used, and less bandwidth being used.

Whether you are hosted with a professional hosting company, or Geocities bandwidth is important to you. Bandwidth costs money, and the more you use the more money you spend. With some hosting services, especially the free ones, your site won’t work if you exceed your monthly quota of bandwidth.

Lets put this in real terms. Say you have a moderately popular site, about 1000 page views a day, quite achievable really. What would you save in our above example?

48.35mb/month

That’s for one image! One! And a small one at that. Think about how many images, GIF images, there are on most web pages. Only 21 similar images would be needed to make that over 1gb of bandwidth savings a month!

Suggestions For Everyone.

Simply put… switch over to using PNG files in your work. It’s better for you, your client, and the future of the web. However, due to Photoshop’s awful support I have some recommendations for saving to PNG.

1. In PhotoShop - Save As Another Format First. If you already have saved out as GIF then this isn’t a problem, just open up the files and save them as PNG using Save For Web. This gets rid of the confused colour information side effect that PS shows. Important – when you load the files back in make sure you set the mode to RGB not Indexed or this will again cause problems. This isn’t a problem if you haven’t saved to a palette image format like GIF, I used 24bit Bitmaps for the second PhotoShop test.
2. Use PNGOut On Your PNG Files. Or use PNG Gauntlet to help you. PNGOut performed excellently on all files, and even compressed the excellent Web Image Guru test image. Simply the best utility I’ve found for PNG compression.

As another recommendation I would suggest using the excellent Web Image Guru, while PNGOut still managed to compress its PNG files the starting standard was excellent, and in combination with PNGOut it produced the best file size overall. Also, as it is not just a PhotoShop plug-in, you can batch covert whole directories of GIFs - or other image formats - over to PNG or anything else that catches your fancy. At $39 it’s a excellent investment.

To Finish.

Well.. that was a bit longer than usual wasn’t it?

I hope that I’ve successfully proven that PNG is a practical and economical replacement for the creaky old GIF format. I didn’t even cover in much depth its additional features that will eventually help everyone make more attractive web pages, and yet I think it is apparent that it is already the superior format.

Here’s to seeing more PNGs in web pages, faster loading times, and lower costs. I think we can all look forward to that.

If you would like to know more about the png format, check out this comprehensive guide at libpng.org

A light-hearted post today.

I thought I’d explain, as I see it, the difference between a geek and a nerd.

What Makes A Geek/Nerd?

Geek and nerd aren’t specific computer related terms. You can be geeky or nerdy about any subject. Cars for example.. they have plenty of geeks and nerds. How do you say? Well I’ll explain shortly.

For the most part geeks and nerds tend to be involved in things with a lot of detail. They both exhibit a knowledge of their subject beyond what a lay person may even think is possible. Indeed, that could be the very definition of where the boundaries lie. Good examples of this could be: role-play games, cars, computers (of course), or fitness.

The Geek

A geek is someone that uses their field for productivity or pleasure, and has accumulated - through a desire to enjoy their experience more or become more proficient at a task - an extensive knowledge of a subject.

Geeks that are involved with machines (cars, computers, stereos, etc) tend to see these things as tools, and by gaining more knowledge about - and hence control over - them they intend to maximise their use of the tool. Be it driving better and for longer, or being able to code an efficient web page without looking at a reference book. The result is the same in terms of difference to a layperson. This type of geek will often know lots about the construction of their area, and can be excited by the prospect of upgrading a small part that may seem insignificant to an outsider, but it impacts (or the geek feels it impacts) the performance of their tasks.

Geeks tend to be concerned with issues in a broader scope than nerds, and are certainly more focused on issues that affect them (this journal for example - web design, and similar issues) and less with the minutiae of details.

The Nerd

A Nerd is someone that has taken their use of a tool or discipline and raised it so that they no longer value the result of it more than the tool or discipline itself. It is the subject that is their love. A geek might know a lot about computers, but it will be what they need to know. A nerd will learn everything they can about computers, but gain no practical benefit for this. Moreover they will experiment with things that will take a lot of time and have no real benefit to them - just because they are learning about the subject.

Nerds tend to be even more fanatical about improving in their subject than geeks, but have a more holistic approach. Rather than improving in their area they must improve overall in all areas.

Nerds are usually the more preachy and anal of the two (though this does depend to some extent on personality - a geek can be an arse too!) and are more prone to nitpicking small irrelevant details and using this as an excuse to junk the rest of the information. This is related to that Nerds are often the hardest group to teach, as their knowledge is sacred to them - and so can never be proved wrong. Sometimes even when presented with overwhelming evidence to the contrary a nerd will still claim that their knowledge is correct.

Nerds are the more annoying of the two, and the most observed. They are highly critical, and tend to put down people rather than help them (as most geeks will try to do - until they lose patience). Often the distinction is missed between these two groups, as the Nerd is usually heard the most.

In Summary

Without Nerds there would be less pushing of the boundaries, but without Geeks no-one would find these things useful. Remember a geek or a nerd doesn’t actually have to have a certain amount of knowledge, it is an attitude to their subject that creates the geek.

Geeks and Nerds are closely related, in fact many nerds will start out as geeks - a starter techie if you will. Geek shouldn’t be a negative term, as it merely infers knowledge. Nerd is more negative, mainly due to the unhealthy obsessive nature of the classic Nerd, however the benefit a Nerd can have on a subject should not be overlooked either.

Viva La Difference!

Of course making your own definition of Geeks and Nerds certainly qualifies you for one of the categories… which one is up to you…