PHP Server Side Scripting Forum


<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"); ?>
<?php
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).