Snook.ca

Improved Bulletproof Slants

Dan Cederholm has a great article on implementing a scalable slanted divider between navigation. My issue with it is that the text, especially as you increase or decrease the font size, isn't exactly centered between the slants. To achieve centering, we simply switch from pixels to em's.

Original:

#nav a { padding: 6px 30px 6px 5px; ... }

With em's:

#nav a { padding: 0.5em 2.5em 0.5em 1em; ... }

The ratio between all four sides remains consistent as the font size gets bigger or smaller. The difference between the right padding (2.5em) and the left padding (1em) reflects the approximate size of the slant. In this case, 1.5em. Now, no matter what size, the text is centered between the slants.

Conversation

Good work Jonathan. I think we all forget about ems sometimes, and they are clearly the optimal solution for this scenario.

Sorry, comments are closed for this post. If you have any further questions or
comments, feel free to send them to me directly.

Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure.
I wrote SMACSS. I tweet. Want to learn more?