CSS & HTML: The CSS Letter-Spacing & BR Tag Glitch
If you are using a custom letter space (e.g. letter-spacing: 2px) such as to make a narrow font more legible or simply for stylistic reasons, you might have noticed that BR (break) tags used within the scope of this styling do not work properly. Instead, your new lines simply appear as continuations of the preceding lines, resulting in a single block of text.
Here is an example of letter-spacing applied to two paragraphs separated with a BR:
1) This is a very easy tutorial showing how to give a waterfall the smooth texture you would get by using a long exposure when taking the picture.
2) Below is the original picture, credit to Mike Mcgarry. Right-click the picture to save, and then load it up in Photoshop.
In certain browsers, like old versions of IE, this is the problem you may be experiencing:
1) This is a very easy tutorial showing how to give a waterfall the smooth texture you would get by using a long exposure when taking the picture. 2) Below is the original picture, credit to Mike Mcgarry. Right-click the picture to save, and then load it up in Photoshop.
Why Does This Happen?
The likely reason seems to be a corruption in the character pair inherent to new lines. A new line consists of two characters, which are the carriage return and the line feed. This is just the conventional CR+LF couplet that computers interpret as one new line.
While I'm not exactly sure as to why the bug occurs, it seems it is that when you apply letter spacing to text containing a break tag, some old browsers also space out the new line's inherent CR and LF characters, wrongly in addition to your normal letters and numbers, essentially dismantling the new line couplet and causing the characters to be rendered at face value, typically as blank spaces. In other words, letter spacing ought to skip break tags, but this detail seems to have been overlooked in some older browsers.
Selectively Override Letter Spacing
Fortunately, fixing this is easy, and simply entails specifying the letter spacing value of only and all your break tags as zero with the following CSS:
<style type="text/css">
br { letter-spacing: 0; }
</style>
This will address the bug in the older browsers while having no visible effect in newer browsers. So just use this as a global rule, and you won't run into this problem anymore.
Continue Reading:
Also See:
Categories: CSS & HTML
Your thoughts
Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback" link, and copy the URL.
Comments
Share your thoughtsBe the first to comment on this article.