CSS for Print Layouts: An Introduction
Print is out of vogue in today’s world. Newspapers, magazines and even billboard ads are turning digital these days. Purists, who believe that written journalism should be read only in print form, blame technology for attracting its audience with flashy and jazzy displays. I don’t entirely disagree with them, but what they fail to realize is that they are fighting a lost battle. Either they stay abreast with technology or they will perish. The advantages that digital displays offer outweigh its downsides.
That said, we often like a retro look at times. Digital displays allow us to display text in umpteen new ways that we could not even have dreamed of in the days of print, but sometimes, we all like to go back to the retro look of print. In this article I will discuss how you can imitate the print look on the web using CSS.
Downloadable Fonts
One of the drawbacks of the web was that we didn’t have too many options for fonts. As developers, we can’t know what fonts are installed on the user’s machine. So either we had to make sure the site looks good even with not so sweet fonts or we could target the lowest common denominator and design the site with only the basic fonts that we could be more or less sure the user would have. All this changed when CSS2 introduced downloadable fonts.
With very little CSS, you can achieve wonderful results. Here is the CSS:
@font-face {
font-family: Handwriting; src: url(‘HandwritingDakota.ttf’);
}
.handwriting { font-family: ‘Handwriting’; }
If you’re interested to know more about how downloadable fonts work, you can read more about it.
Kerning
Another important aspect of print is the kerning, or the spacing between characters. Kerning is usually set by the font designer for the font at normal point size, which is 12 pixels. When you use a larger font size than 12, then the letters look spaced out and you need to tighten them together. And when you make the font size smaller, you would increase the kerning in order to space the letters out a little.
Until CSS2, we could not do this. If the designer was very particular, then you had to make an image of the text and use the image. However, CSS3 introduced kerning and now we don’t need to use image for these pieces of text. Here is an example CSS code to adjust kerning:
<span style=”letter-spacing: 5px”>Ask Some Questions</span>
Justification
If you ask a desktop publisher how the body of an article should be aligned, most likely you will hear him say “justified”. The same question, when posed to a web designer, he would tell you that justified text is old school and boring; and the new trend is to left align the text. The jagged right edge adds to the design. I can’t really side with either of them since both make sense to me. However, the web designer was hiding a little secret from you. Until a few years ago, you could not justify text on the web. In order to cover for this drawback, the web designer community decided to sell it as a new trend in design.
After much demand for justified text, the W3C consortium decided to finally support justified text in CSS3. It is as simple as the following code:
#text-block { width: 400px; text-align: justify; }
Hyphenation
Justifying text makes the page look neat and nice, but if you look closely at the text, sometimes you will notice that the space between some words is quite large and it looks a little odd. This happens because the first word on the next line is too long to fit into this line and that is why it has to be pushed down. And now, as the text has to stick to both edges of the text block, the only place the browser can add space is in between words.
Now open a printed book and see if you find large spaces between words. I doubt you’ll find any. So how did the book publishers solve this problem? Hyphenation. I am quite sure you learned in your language class in school how to use the hyphen. If you have to split a word, you should add a hyphen at the end of a syllable, not in the middle.
So how do we handle this in HTML? There are two types of hyphens, plain and soft hyphen. The plain hyphen is the ‘dash’ character on the keyboard. It will always show up. The soft hyphen tells the user agent where a line break can appear. So only if a line break is required there, the hyphen will show, otherwise it wont show.
Text on the web can and will change. Column widths can change with different window sizes, and users could be viewing the page on tiny devices. In other words, there is no precise way to predict where the text will wrap. This is definitely one of the unavoidable side effects that comes with the all the greatness of electronic text.
The only way to get text to hyphenate correctly is to add a soft hyphen where ever a word can be split. So ‘concentration’, which consists of 4 syllables (con-cen-tra-tion) would have to be written as ‘con­cen­tra­tion’. I know this doesn’t sound too encouraging as a web developer. It is a pain to go through and hyphenate all the text. Also, search engines don’t remove the soft hyphens when comparing the searched terms with the content on your web page.
Fortunately, Mathias Nater has solved this problem for all of us. Hyphenator.js, a library that he has built is by far the most matured solution. It uses the same compression algorithms and hyphenation dictionaries used by products like TEX. What the script does is after the page loads, it parses through the text and hyphenates it by doing a search and replace. So depending on the amount of text, there might be some delay in showing the content on the page. Hyphenator.js also inserts the zero white space (ZWS) character for smart URL line wrapping.
Multi-Column Layout
Last but not the least interesting feature that was introduced in CSS3 is multi-column layouts. This sort of layout is extremely prevalent in the print industry. Newspapers, magazines and several other publications use this layout. And since we are trying to mimic the print layout on the web, multi column view should definitely be on our list. Thankfully CSS3 has introduced support for multi column layouts. You can either define the width of the columns or the number of columns that you would like and the browser will accordingly lay the text in equally wide and tall columns. If you specify the height of the container, then the browser will make sure that the columns has that much height at least.
Here is a sample CSS to display text in 3 columns:
#text-block {
width: 800px;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
height: 600px;
}
Conclusion
In this article, we have looked at various aspects of how you can render your web page as though it was a printed document. The most critical difference for the reader between print and electronic text is the sharpness. The human eye finds it a lot easier to read printed text as compared to electronic text. However, with the retina display and newer generations of displays coming into the market, the gap is getting bridged and a lot of people are tending to become as comfortable with reading text on electronic devices. Once this gap is completely bridged, we can let our creative juices flow and come up with dynamic layouts that still look like print.
