Entry tags:

resources: link dump, resources: tutorials

Make your posts look more book-like
Do you want to make everything justified but HATE the fact that every single God-blessed time you use text-align:justfy; in your style, at lease one line ends up having ginormous spaces between the words because the text didn't fit perfectly? Well, allow me to introduce you to the soft hyphen (aka ­) and its magic~!

What is the soft hyphen? Here's a technical quote from this fabulous ALA article (which also discusses the zero-width space, if you're interested.)

In HTML, there are two types of hyphens: The plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur.

Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored.

In HTML, the plain hyphen is represented by the “-” character (- or -). The soft hyphen is represented by the character entity reference ­ (­ or ­)

Sounds neat, right? Let's look at an example.

No soft hyphen When it comes to new browser features, Flash-y effects get the glory and so it’s no surprise that support for a special unicode font character called the soft hyphen would go largely unnoticed. But the soft hyphen is the key to good-looking hyphenation and justification. And over the years it’s gained support in every A-grade browser: IE6+, Opera 7.1+, Safari 2+, Firefox 3+, and Chrome. This, combined with a little JavaScript jiggery, makes H&J a viable design technique today.

The magical soft hyphen When it comes to new browser fea­tures, Flash-y ef­fects get the glory and so it’s no sur­prise that sup­port for a spe­cial uni­code font char­ac­ter called the soft hy­phen would go largely un­noticed. But the soft hy­phen is the key to good-look­ing hy­phen­a­tion and jus­ti­fic­a­tion. And over the years it’s gained sup­port in every A-grade browser: IE6+, Op­era 7.1+, Sa­fari 2+, Fire­fox 3+, and Chrome. This, com­bined with a little JavaS­cript jig­gery, makes H&J a vi­able design tech­nique today.

Look at that! Some space is saved and there are no giant spaces!

Unfortunately, the soft hyphen does NOT work with all browsers. So, in some cases, these paragraphs may look identical.

How do you add the soft hyphen to every possible line-break without losing your mind? Some genius on the internet put together a webapp that will do it for you. Check out Hypho-o!

The trick to using Hypho-o is simple: copy and paste your text into the provided box, alter your settings (change "Hyphen" to ­ and "Text-Type" to "Text", alter "Language" and "Text-Align" at your leisure), enter the CAPTCHA code, and hit the "Hyphenate Text!" button.

Voila! You should now have some CRAZY looking code with a soft hyphen at every syllable break. The magical part is that they won't show up unless they NEED to show up. You can test this by dragging around their preview box to see what the textbox will look like at different widths. Fantastic, right?

I know this isn't going to be everyone's THING, but personally, I found it to be really freaking cool. Though, I find EVERYTHING about typography to be really freaking cool, so I'm a little biased.

Next up, modular spacing. Do you like to play with the font-size, letter-spacing, and line-height? Well, this may or may not sound insane, but how you space your text does affect a person's interest in reading what you have to say.

First of all, I'm going to point out that I am paraphrasing this ALA article.

The gist is: using modular spacing makes your text look more meaningful. What is modular spacing? It's the idea that certain ratios in text spacing optimize said text.

Let's look at an example.

Plain Ol' Text A mod­u­lar scale is a se­quence of num­bers that re­late to one an­oth­er in a mean­ing­ful way. Us­ing the golden ra­tio, for ex­ample, we can pro­duce val­ues for a mod­u­lar scale by mul­tiply­ing by 1.618 to ar­rive at the next highest num­ber, or di­vid­ing by 1.618 to ar­rive at the next num­ber down. By us­ing cul­tur­ally rel­ev­ant, his­tor­ic­ally pleas­ing ra­tios to cre­ate mod­u­lar scales and basing the meas­ure­ments in our com­pos­i­tions on val­ues from those scales, we can achieve a visu­al har­mony not found in lay­outs that use ar­bit­rary, con­ven­tion­al, or eas­ily di­vis­ible num­bers.

Random play on numbers A mod­u­lar scale is a se­quence of num­bers that re­late to one an­oth­er in a mean­ing­ful way. Us­ing the golden ra­tio, for ex­ample, we can pro­duce val­ues for a mod­u­lar scale by mul­tiply­ing by 1.618 to ar­rive at the next highest num­ber, or di­vid­ing by 1.618 to ar­rive at the next num­ber down. By us­ing cul­tur­ally rel­ev­ant, his­tor­ic­ally pleas­ing ra­tios to cre­ate mod­u­lar scales and basing the meas­ure­ments in our com­pos­i­tions on val­ues from those scales, we can achieve a visu­al har­mony not found in lay­outs that use ar­bit­rary, con­ven­tion­al, or eas­ily di­vis­ible num­bers. font-size: 14px line-height: 18px letter-spacing: 1px

Modulated spacing A mod­u­lar scale is a se­quence of num­bers that re­late to one an­oth­er in a mean­ing­ful way. Us­ing the golden ra­tio, for ex­ample, we can pro­duce val­ues for a mod­u­lar scale by mul­tiply­ing by 1.618 to ar­rive at the next highest num­ber, or di­vid­ing by 1.618 to ar­rive at the next num­ber down. By us­ing cul­tur­ally rel­ev­ant, his­tor­ic­ally pleas­ing ra­tios to cre­ate mod­u­lar scales and basing the meas­ure­ments in our com­pos­i­tions on val­ues from those scales, we can achieve a visu­al har­mony not found in lay­outs that use ar­bit­rary, con­ven­tion­al, or eas­ily di­vis­ible num­bers. font-size: 15px line-height: 24.27px letter-spacing: 0

Soft hyphens were added for increased prettiness. Let your eyes decide which one they prefer.

So, how do you know which measurements to use? Fortunately, there is a calculator. Enter your desired font size in the top box, leave the second box blank, and choose your ratio before clicking "Submit Query". Voila! You have your modulated numbers.

Again, this might not matter to you, but we are definitely on our way to making this text look more like a book!

The last thing I'm going to do is indent the text, emphasize the first letter of the article, and change the font.

Text indentation is very simple, but most people don't bother because it takes extra code. All it boils down to is using the text-indent property in each paragraph's style.

Here's an example.

Plain Paragraphs A mod­u­lar scale is a se­quence of num­bers that re­late to one an­oth­er in a mean­ing­ful way. Us­ing the golden ra­tio, for ex­ample, we can pro­duce val­ues for a mod­u­lar scale by mul­tiply­ing by 1.618 to ar­rive at the next highest num­ber, or di­vid­ing by 1.618 to ar­rive at the next num­ber down. By us­ing cul­tur­ally rel­ev­ant, his­tor­ic­ally pleas­ing ra­tios to cre­ate mod­u­lar scales and basing the meas­ure­ments in our com­pos­i­tions on val­ues from those scales, we can achieve a visu­al har­mony not found in lay­outs that use ar­bit­rary, con­ven­tion­al, or eas­ily di­vis­ible num­bers.

Indented Text A mod­u­lar scale is a se­quence of num­bers that re­late to one an­oth­er in a mean­ing­ful way. Us­ing the golden ra­tio, for ex­ample, we can pro­duce val­ues for a mod­u­lar scale by mul­tiply­ing by 1.618 to ar­rive at the next highest num­ber, or di­vid­ing by 1.618 to ar­rive at the next num­ber down. By us­ing cul­tur­ally rel­ev­ant, his­tor­ic­ally pleas­ing ra­tios to cre­ate mod­u­lar scales and basing the meas­ure­ments in our com­pos­i­tions on val­ues from those scales, we can achieve a visu­al har­mony not found in lay­outs that use ar­bit­rary, con­ven­tion­al, or eas­ily di­vis­ible num­bers.

More book-like, right?

So, how did I do it? I did by adding the p tag with the style style="text-indent:24.27px; before each paragraph. Admittedly, this is a pain in the butt and I wish there was a work around, but there isn't. So, use at your own will.

Next, we'll make an eye-catching first letter on the first paragraph. Here's an example:

By us­ing cul­tur­ally rel­ev­ant, his­tor­ic­ally pleas­ing ra­tios to cre­ate mod­u­lar scales and basing the meas­ure­ments in our com­pos­i­tions on val­ues from those scales, we can achieve a visu­al har­mony not found in lay­outs that use ar­bit­rary, con­ven­tion­al, or eas­ily di­vis­ible num­bers.

This was achieved by adding a span tag around the first letter with the style style="font-size:24.27px;font-weight:bold;".

Lastly, I'm changing the font to Georgia because the majority of books come in serif fonts. Here's an example:

A mod­u­lar scale is a se­quence of num­bers that re­late to one an­oth­er in a mean­ing­ful way. Us­ing the golden ra­tio, for ex­ample, we can pro­duce val­ues for a mod­u­lar scale by mul­tiply­ing by 1.618 to ar­rive at the next highest num­ber, or di­vid­ing by 1.618 to ar­rive at the next num­ber down.

By us­ing cul­tur­ally rel­ev­ant, his­tor­ic­ally pleas­ing ra­tios to cre­ate mod­u­lar scales and basing the meas­ure­ments in our com­pos­i­tions on val­ues from those scales, we can achieve a visu­al har­mony not found in lay­outs that use ar­bit­rary, con­ven­tion­al, or eas­ily di­vis­ible num­bers.

Looking rather book-ish, right?

Take a look at the code for that last example:
<center><lj-raw> <div style="width:300px;text-align:justify;font-size:15px;letter-spacing:0;line-height:24.27px;font-family: Georgia, serif;"><p style="text-indent:24.27px;"><span style="font-size:24.27px;font-weight:bold;">A</span> mod&#173;u&#173;lar scale is a se&#173;quence of num&#173;bers that re&#173;late to one an&#173;oth&#173;er in a mean&#173;ing&#173;ful way. Us&#173;ing the golden ra&#173;tio, for ex&#173;ample, we can pro&#173;duce val&#173;ues for a mod&#173;u&#173;lar scale by mul&#173;tiply&#173;ing by 1.618 to ar&#173;rive at the next highest num&#173;ber, or di&#173;vid&#173;ing by 1.618 to ar&#173;rive at the next num&#173;ber down.</p> <p style="text-indent:24.27px;">By us&#173;ing cul&#173;tur&#173;ally rel&#173;ev&#173;ant, his&#173;tor&#173;ic&#173;ally pleas&#173;ing ra&#173;tios to cre&#173;ate mod&#173;u&#173;lar scales and basing the meas&#173;ure&#173;ments in our com&#173;pos&#173;i&#173;tions on val&#173;ues from those scales, we can achieve a visu&#173;al har&#173;mony not found in lay&#173;outs that use ar&#173;bit&#173;rary, con&#173;ven&#173;tion&#173;al, or eas&#173;ily di&#173;vis&#173;ible num&#173;bers.</p></div> </lj-raw></center>

And that's basically all I have to share. Happy coding!


I was thinking there could be a typography tag for things like this? I know there have been other posts on the subject...