Category: Web Standards

Observations on the CSS3 Box-Sizing Property and How Designers Use Style Sheets

Recently, I became aware of CSS3’s box-sizing property. This property can have two values, content-box and border-box. The content-box value is what we’re all used to. It causes the selected box’s dimensions to be sized by setting the specified width of the box equal to the width of the content area of the box. Any horizontal borders or padding that the box has is then added to the content area’s width. The border-box value sets the selected box’s width equal to the content area and any horizontal borders and padding, effectively subtracting the width of the padding and border from the declared width in order to calculate the content area’s width.

In other words, the border-box value to the box-sizing property makes the selected box use Internet Explorer’s non-standard box model. At least, it was non-standard until it became part of the CSS3 spec. The spec even notes this itself, saying “This is the behavior of width and height as commonly implemented by legacy HTML user agents for replaced elements and input elements.”

This is somewhat annoying, because this means that rather than fix their “Web browser,” Microsoft can now say that their browser supports this property of CSS. In the end however, I do see the necessity of the property for compatibility reasons, as much as that necessity (caused by one browser vendor’s lack of support for Web standards) bothers me.

The most direct application of this technique comes in the form of making two child elements who have borders and/or padding fit precisely within one larger parent element whose width is flexible. For example, making floated, columnar layouts.

So while taking all this in I took some time to familiarize myself as best I could with Firefox’s implementation, the -moz-box-sizing property, and its effects. Some of my observations:

  1. Most interesting uses for three column liquid layouts (or more). Two column layouts can use a (more complicated) balancing of float: left and float: right to achieve a similar effect in a liquid layout, though a small, variable amount of space between columns is nearly unavoidable.

    Also, experienced designers usually keep a certain degree of whitespace in their layouts, making such tightly fitted floats largely unnecessary and/or impractical implementations for certain designs. (I.e., positioning would be a more appropriate solution.)

  2. Border-boxes offer no help for linking the height of a box to the height of its neighbor. Considering this is the biggest failing of CSS-based columnar layouts to date, I would stick with an accessible table where absolutely necessary, which can be and often is sized just like a border-box.

  3. When confronted with left-floated boxes such as in the case of a columnar layout, IE/Win versions that use the border-box method of calculating width and height will drop a tightly-fitted floated box below its neighbor on a window resize. This creates either a trippy experience or cause for frustration depending on your mood. Considering this property is at least partially intended to help IE/Win, that’s quite an embarassing thing to have happen, methinks.

  4. All in all, I’m still not convinced of the necessity of this property, except to support IE. While it can certainly be a useful “option” when attempting to create (arguably simplistic) column layouts using strictly semantic markup and CSS, tables are still going to be necessary in some designs. In the situations where they are not, a combination of existing techniques can still be used to achieve any desired effect.

Furthermore, this certainly doesn’t help make CSS a more approachable topic for Web designers who are new to the technology. The single largest obstacle to CSS’s widespread adoption are the many various and often extreme browser bugs and quirks present in the majority of browsers. When a CSS newbie begins writing some stylesheets, they are greeted with horrendous results thanks to these misbehaving browsers. I know of several Web design projects that have begun using stylehseets, only to abandon all but their most basic capability due to frustration on the designer’s part. Some CSS concepts are not easy to grasp for beginners, the box model being one of them, and I am not fond of the idea of presenting designers with yet more differences in the way their pages can be rendered.

Moreover, most CSS beginners I have encountered use a GUI such as Dreamweaver or GoLive to create their stylesheets. In this case, a question arises for the developers of these interfaces: how do I visually show which kind of box-sizing is being used for this particular box on the screen? Do I show a little icon in the corner of the box’s display? Do I hide it in a dialog box?

In my opinion, these interfaces are not very good for creating style sheets. There is currently no application whith which you can actually draw, with your mouse, a rectangle of padding onto an element. You have to type a number into the “Padding” input box and then select the unit you’d like to use from a drop down menu. Designers do not think this way. Coders and programmers do. But coders and programmers aren’t the ones who really need CSS. Designers do. And they need their tools and their web browsers to speak their own language to them.

Fun with Character and Entity References and Why You Should Use Them

Character references? Entity references? Am I referencing some obscure geek joke? No, I’m actually talking about a often overlooked aspect of the push towards a more semantic Web.

What are Character and Entity References?

First, let me explain what character and entity references are actually referencing.

Written languages the world over employ various symbols to denote different effects of verbal communication. In addition to these punctuation marks, various symbols are used to describe relationships between parts of a written phrase. One very common example of this is the dash to denote a range of numbers. For example, the dash between the years in the sentence “George Orwell (1903–1950) was a British author,” denotes a range of years in which George Orwell lived.

Many times, this is written with a simple dash. A dash looks like this, - and its purpose is to break apart long words at the end of a line in print or to connect two words to form a single one. The dash used in the above lifespan example is not a regular dash. It is called an n-dash, named for its length, about equal to the width of the lowercase letter N.

The other common dash seen in prose is the dash used to break the flow of a sentence. This is called an m-dash, which looks like this , and is named for its width (approximately as wide as the lowercase letter M). I’ve often seen this written online as two dashes like this: --. You probably have, too.

Ordinarily, word processors like Microsoft Word take care of the formatting. If you type -- and then hit the space-bar in word, the program automatically converts your dashes into an m-dash. But if you were to copy and paste the Word-formatted m-dash into an HTML document, browsers would have difficulty reading the character and would be unable to display it appropriately. This is where character references come into play.

Okay, so how do I use them?

Character references are specially-encoded characters referenced by number. For example, the character reference for writing an m-dash is —, that is, an ampersand, the octothorpe (frequently misinterpreted as the number sign) symbol, the numeric characters 8, 2, 1, and 2, followed by a semicolon to mark the end of the reference. All character and entity references begin with an ampersand (&) and end with a semicolon (;).

Entity references are almost identical to character references, except they refer to specific characters by name rather than by number. For example, the entity reference to write an m-dash is —. Entity references were created to make character references easier to remember.

Word of Warning! Many HTML entity references are not compatible with some other language formats (most notably SVG). Always use the numeric character references in favor of entity references for maximum document portability. That said, I often use entity references simply because they’re easier to remember. If I want to port my document to some other format, though, I’ll need to replace the entity references with proper entity values. This article is great if you’re looking for more information on typography in general or how it pertains to SVG specifically.

Why should I go through all this trouble?

  1. Professionalism. If you have a business Web site, then you should do it for no other reason than because it’s only professional to do so.
  2. Semantic accuracy. There is a big difference between three periods in a row and an ellipses. The former is simply bad English. (An ellipses, by the way, is …, or ….)
  3. For looks. Which line do you think looks better:
    1. "They used dumb quotes all over their site!"
    2. “I was impressed; they used smart quotes on their site!”

    Smart quotes, by the way, can be written with “ for opening quotes, and ” for closing quotes. This name is an abbreviation of “left/right double quote”. The character references are “ and ”, respectively.

Great! I love my newfound semantic correctness. Now can I have some fun?

You bet! A friend of mine blogged the other day and had just the need for such entity references. In this case, she wanted to make a check mark appear. Here’s a table showing some fun symbols you can use to spice up the text on your page! Just be aware that some older browsers won’t render these properly, because they don’t understand them, and some symbols won’t work with certain encodings. For best results, encode your page as UTF-8.

Symbol Meaning HTML Entity Reference Numeric Character Reference
Here is a very comprehensive list of HTML entity references.
Check mark? Check! None. ✓
Mail envelope. None. ✉
Victory! w00t! None. ✌
Musical double bar note. None. ♬
Black pawn. Now you can use your friends for evil. None. ♟
Cancer zodiac symbol. My sign. None. ♋
Smiley. Just like your word processor! None. ☺
Yin and yang. Gives you balance and inner peace. None. ☯
Star of David. Jewish religious symbol. None. ✡
Biohazard sign. Put this on your splash page to keep others out. Heh…. None. ☣
Skull and bones. Yar. None. ☠
Telephone. None. ☎
Solid star. Rate your friends. None. &#9733
Paragraph mark. Use it to annoy bad Microsoft Word authors who don’t turn on invisible characters. >:) ¶ ¶
· Middle dot. An interesting factoid is that this is used as a separator between foreign first and last names in Japanese. · ·
Þ Capitol THORN. Makes for a great smiley. :-Þ Þ Þ
Dagger. Used for footnotes and the like. Also useful for stabbing. † †
ƒ Latin lower case F with hook. Sometimes used on Apple Macintosh computers as a suffix for folder names. ƒ ƒ
Cursive capital letter P, power set, and Weierstraff P. ℘ ℘
Blackletter capital letter I, and mathematical imaginary part symbol. ℑ ℑ
Blackletter capital letter R and mathematical real part symbol. ℜ ℜ
Hebrew print letter Alef, and mathematical first transfinite cardinal. ℵ ℵ
mathematical vector product, or circled times. ⊗ ⊗
Lozenge, a geometric diamond. Also a great cough candy. ◊ ◊
Numero symbol. The real number sign. None. №

Hope you have fun with these. ‘Til next time, ☮-out!