homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

Tired of calculating your vertical rhythm?
Let's work on this together.

5+ Year Member

Msg#: 3771080 posted 1:01 pm on Oct 22, 2008 (gmt 0)

I made a very (VERY!) simple php script to aid me in maintaining my vertical rhythm. I would love for you all to make it better, more efficient. So feel free to expand and improve on this!

We rename our stylesheet with a php extension and call it from html thus:

<link rel="stylesheet" href="css/typography.php" type="text/css" charset="utf-8" media="screen" />

Next you put this at the top of this style sheet:

<?php header("Content-type: text/css"); ?>
function Rhythm($FontSize, $BaseLineHeight, $MarginTop, $MarginBottom, $BorderTop, $BorderBottom)
// Calculate the new line-height
$NewLineHeight = $BaseLineHeight / $FontSize;
//How much is 1px in ems?
$PixelBase = 1 / $FontSize;
// Calculate how much the borders are in ems
$emBorderTop = $BorderTop * $PixelBase;
$emBorderBottom = $BorderBottom * $PixelBase;
// Calculate how much the margins are in ems
$MarginTop = ($MarginTop * $NewLineHeight);
$MarginBottom = ($MarginBottom * $NewLineHeight);
// Subtract the border widths from the margins
$MarginTop = $MarginTop - $emBorderTop;
$MarginBottom = $MarginBottom - $emBorderBottom;
// If the line-height is smaller than the font-size, double it
if ($NewLineHeight < 1) {
$NewLineHeight = $NewLineHeight * 2;
echo "line-height: " . $NewLineHeight . "em;\n";
echo "margin-top: " . $MarginTop . "em;\n";
echo "margin-bottom: " . $MarginBottom . "em;\n";
echo "border-bottom-width: " . $BorderBottom . "px;\n";
echo "border-top-width: " . $BorderTop . "px;\n";

And you use it like this:

#maincontent p {
font-size: 1.4em;
<?php Rhythm(14, 20, 1, 1, 0, 1); ?>

The first argument is the current font-size in px.
The second argument is the (parents) line-height in px.
The third and fourth arguments are the margins (top/bottom) in multiples of lineheight (so 2 would mean 2xline-height).
The fifth and sixth argument are the borders (top/bottom) in pixels.

I output the border widths in pixels because I usually use 1px borders (if any) and they tend to show up rather thicker in some browsers when I use ems. Which I think is ugly.

The fontsize is not output but simply declared on it's own in ems. (Because I cannot figure out how to do this generically).



WebmasterWorld Administrator coopster us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3771080 posted 1:21 pm on Nov 3, 2008 (gmt 0)

Not a lot of takers, eh Bert36?
The last time I seen a vertical rhythm chart was way back in my IBM RPG programming days. I never did understand what in the world a vertical rhythm was for anyway. Probably why you don't see a lot of responses here yet ;)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved