mirisuzanne/example.html

## example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0068)http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Compose a Vertical Rhythm example</TITLE>

<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
</HEAD><BODY>
<H1>Aboard Minerva off the Coast of New England</H1>

<DIV class="content">
<P>
Daniel is roused by a rooster on the forecastledeck† that is growing certain it’s not just imagining that light in the eastern sky. Unfortunately the eastern sky is off to port this morning. Yesterday it was starboard. Minerva has been sailing up and down the New England coast for the better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from&nbsp;Boston.
</P>

<P class="sidenote">
† The forecastledeck is the short deck that, towards the ship’s bow, is built above the&nbsp;upperdeck.
</P>

<H2>
Contrary Winds
</H2>

<P>
Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a&nbsp;reading.
</P>

<P>
He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches&nbsp;London.
</P>

<P class="footnote">Text taken from <CITE>Quicksilver</CITE> by Neal&nbsp;Stephenson.</P>
</DIV>


</BODY></HTML>

## original.css
/* This is the original, hand-crafted css from
 * http://24ways.org/2006/compose-to-a-vertical-rhythm/
 */
body {
	background:url("underline.png");
	margin:3em 6em;
	font-size:75%;
	font-family:georgia, "times new roman", serif;
}
html>body {
	font-size:12px;
}
p {
	font-size:1em;
	line-height:1.5em;
	margin:0 0 1.5em 0;
	width:33em;
}
h1 {
	line-height:1em;
	font-size:1.5em;
	font-weight:normal;
	margin:0 0 1em 0;
}
h2 {
	font-size:1.1667em;
	line-height: 1.286em;
	margin:1.929em 0 0.643em 0;
	font-weight:normal;
}
.sidenote {
	text-indent:-0.7em;
	width:12em;
	margin-right:0;
	font-size:0.8333em;
	line-height:1.8em;
	position:absolute;
	top:0;
	left:42.6em;
}
.footnote {
	border-top:0.08333em solid #000;
	margin-top:2.25em;
	padding-top:0.667em;
	margin-left:0;
	width:45.5em;
}
.content {
	position:relative;
}

## sassy.sass
// Compilation command:
// sass `compass --imports` sassy.sass > sassy.css
@import compass/reset.sass

*:focus
  outline: #ccc dotted medium

@import vertical_rhythm.sass

/* Typography */
+establish-baseline

body
  font-family: georgia,"times new roman",serif
  +establish-baseline

p
  +trailer

h1
  +adjust-font-size-to(!base_line_height)
  +trailer(1, !base_line_height)

h2
  +adjust-font-size-to(14px)
  +leader(1.5, 14px)
  +trailer(0.5, 14px)

h3
  +adjust-font-size-to(12px)
  font-weight: bold
  +leader(1.5)
  +trailer(1.5)

.sidenote
  +adjust-font-size-to(10px)
  text-indent: -0.7em

// if you think .sidenote has too much whitespace
// try putting 5 small lines within every 4 normal lines:
.compact-sidenote
  +adjust-font-size-to(10px, 4/5)

.footnote
  +leader(1.5)
  +top-border(1px, 0.5)
  border:
    style: solid
    color: #999

/* Layout */
body
  +leader(2)
  +trailer(2)
  +debug-vertical-alignment
  margin:
    left=  4*!base_rhythm_unit
    right= 4*!base_rhythm_unit

.content
  position: relative

p
  width = 22*!base_rhythm_unit

.sidenote
  position: absolute
  top: 0em
  left = 28*!base_rhythm_unit
  width: 12em

## underline.png
�PNG

���
IHDR���
������������IDATx�c�0�J�,�x�4
oWچ����IEND�B`�

## vertical_rhythm.sass
// The IE font ratio is a fact of life. Deal with it.
!ie_font_ratio = 16px / 100%

// The base line height is the basic unit of line hightness.
!base_line_height ||= 18px

// The base font size
!base_font_size ||= 12px

// The basic unit of font rhythm
!base_rhythm_unit= !base_line_height / !base_font_size * 1em

// The leader is the amount of whitespace in a line.
// It might be useful in your calculations
!base_leader = (!base_line_height - !base_font_size) * 1em / !base_font_size

// The half-leader is the amount of whitespace above and below a line.
// It might be useful in your calculations
!base_half_leader = !base_leader / 2

// Establishes a font baseline for the given font-size in pixels
=establish-baseline(!font_size = !base_font_size)
  body
    font-size= !font_size / !ie_font_ratio
    +adjust-leading-to(1, !font_size)
  html>body
    font-size= !font_size


// Show a background image that can be used to debug your alignments.
=debug-vertical-alignment
  background: url(underline.png)

// Adjust a block to have a different font size and leading to maintain the rhythm.
// !lines is a number that is how many times the baseline rhythm this
// font size should use up. Does not have to be an integer, but it defaults
// to the smallest integer that is large enough to fit the font.
=adjust-font-size-to(!font_size, !lines = ceil(!font_size / !base_line_height))
  font-size= 1em * !font_size / !base_font_size
  +adjust-leading-to(!lines, !font_size)

=adjust-leading-to(!lines, !font_size = !base_font_size)
  line-height= 1em * !lines * !base_line_height / !font_size

// Apply leading whitespace
=leader(!lines = 1, !font_size = !base_font_size)
  margin-top= 1em * !lines * !base_line_height / !font_size

// Apply trailing whitespace
=trailer(!lines = 1, !font_size = !base_font_size)
  margin-bottom= 1em * !lines * !base_line_height / !font_size

// Apply a border width without messing up the rhythm
=border(!side, !width = 1px, !lines = 1, !font_size = !base_font_size)
  border-#{!side}-width= 1em * !width / !font_size
  padding-#{!side}= (1em / !font_size) * ((!lines * !base_line_height) - !width)

=top-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +border("top", !width, !lines, !font_size)

=bottom-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +border("bottom", !width, !lines, !font_size)
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<!-- saved from url=(0068)http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html -->
	<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<TITLE>Compose a Vertical Rhythm example</TITLE>

	<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
	<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
	</HEAD><BODY>
	<H1>Aboard Minerva off the Coast of New England</H1>

	<DIV class="content">
	<P>
	Daniel is roused by a rooster on the forecastledeck† that is growing certain it’s not just imagining that light in the eastern sky. Unfortunately the eastern sky is off to port this morning. Yesterday it was starboard. Minerva has been sailing up and down the New England coast for the better part of a fortnight, trying to catch a wind that will decisively take her out into deep water, or “off soundings,” as they say. They are probably not more than fifty miles away from Boston.
	</P>

	<P class="sidenote">
	† The forecastledeck is the short deck that, towards the ship’s bow, is built above the upperdeck.
	</P>

	<H2>
	Contrary Winds
	</H2>

	<P>
	Daniel goes back and sits by one of the windows – these are undershot so that he can look straight down and see Minerva’s wake being born in a foamy collision around the rudder. He opens a small hatch below a window and drops out a Fahrenheit thermometer on a string. It is the very latest in temperature measurement from Europe – Enoch presented it to him as a sort of party favour. He lets it bounce through the surf for a few minutes, then hauls it in a takes a reading.
	</P>

	<P>
	He’s been trying to perform this ritual every four hours – the objective being to see if there’s any rumour that the North Atlantic is striped with currents of warm water. He can present the data to the Royal Society if God-willing he reaches London.
	</P>

	<P class="footnote">Text taken from <CITE>Quicksilver</CITE> by Neal Stephenson.</P>
	</DIV>


	</BODY></HTML>
	/* This is the original, hand-crafted css from
	* http://24ways.org/2006/compose-to-a-vertical-rhythm/
	*/
	body {
	background:url("underline.png");
	margin:3em 6em;
	font-size:75%;
	font-family:georgia, "times new roman", serif;
	}
	html>body {
	font-size:12px;
	}
	p {
	font-size:1em;
	line-height:1.5em;
	margin:0 0 1.5em 0;
	width:33em;
	}
	h1 {
	line-height:1em;
	font-size:1.5em;
	font-weight:normal;
	margin:0 0 1em 0;
	}
	h2 {
	font-size:1.1667em;
	line-height: 1.286em;
	margin:1.929em 0 0.643em 0;
	font-weight:normal;
	}
	.sidenote {
	text-indent:-0.7em;
	width:12em;
	margin-right:0;
	font-size:0.8333em;
	line-height:1.8em;
	position:absolute;
	top:0;
	left:42.6em;
	}
	.footnote {
	border-top:0.08333em solid #000;
	margin-top:2.25em;
	padding-top:0.667em;
	margin-left:0;
	width:45.5em;
	}
	.content {
	position:relative;
	}
	// Compilation command:
	// sass `compass --imports` sassy.sass > sassy.css
	@import compass/reset.sass

	*:focus
	outline: #ccc dotted medium

	@import vertical_rhythm.sass

	/* Typography */
	+establish-baseline

	body
	font-family: georgia,"times new roman",serif
	+establish-baseline

	p
	+trailer

	h1
	+adjust-font-size-to(!base_line_height)
	+trailer(1, !base_line_height)

	h2
	+adjust-font-size-to(14px)
	+leader(1.5, 14px)
	+trailer(0.5, 14px)

	h3
	+adjust-font-size-to(12px)
	font-weight: bold
	+leader(1.5)
	+trailer(1.5)

	.sidenote
	+adjust-font-size-to(10px)
	text-indent: -0.7em

	// if you think .sidenote has too much whitespace
	// try putting 5 small lines within every 4 normal lines:
	.compact-sidenote
	+adjust-font-size-to(10px, 4/5)

	.footnote
	+leader(1.5)
	+top-border(1px, 0.5)
	border:
	style: solid
	color: #999

	/* Layout */
	body
	+leader(2)
	+trailer(2)
	+debug-vertical-alignment
	margin:
	left= 4*!base_rhythm_unit
	right= 4*!base_rhythm_unit

	.content
	position: relative

	p
	width = 22*!base_rhythm_unit

	.sidenote
	position: absolute
	top: 0em
	left = 28*!base_rhythm_unit
	width: 12em
	�PNG

	��
	IHDR��
	��IDATx�c�0�J�,�x�4
	oWچ��IEND�B`�
	// The IE font ratio is a fact of life. Deal with it.
	!ie_font_ratio = 16px / 100%

	// The base line height is the basic unit of line hightness.
	!base_line_height \|\|= 18px

	// The base font size
	!base_font_size \|\|= 12px

	// The basic unit of font rhythm
	!base_rhythm_unit= !base_line_height / !base_font_size * 1em

	// The leader is the amount of whitespace in a line.
	// It might be useful in your calculations
	!base_leader = (!base_line_height - !base_font_size) * 1em / !base_font_size

	// The half-leader is the amount of whitespace above and below a line.
	// It might be useful in your calculations
	!base_half_leader = !base_leader / 2

	// Establishes a font baseline for the given font-size in pixels
	=establish-baseline(!font_size = !base_font_size)
	body
	font-size= !font_size / !ie_font_ratio
	+adjust-leading-to(1, !font_size)
	html>body
	font-size= !font_size


	// Show a background image that can be used to debug your alignments.
	=debug-vertical-alignment
	background: url(underline.png)

	// Adjust a block to have a different font size and leading to maintain the rhythm.
	// !lines is a number that is how many times the baseline rhythm this
	// font size should use up. Does not have to be an integer, but it defaults
	// to the smallest integer that is large enough to fit the font.
	=adjust-font-size-to(!font_size, !lines = ceil(!font_size / !base_line_height))
	font-size= 1em * !font_size / !base_font_size
	+adjust-leading-to(!lines, !font_size)

	=adjust-leading-to(!lines, !font_size = !base_font_size)
	line-height= 1em * !lines * !base_line_height / !font_size

	// Apply leading whitespace
	=leader(!lines = 1, !font_size = !base_font_size)
	margin-top= 1em * !lines * !base_line_height / !font_size

	// Apply trailing whitespace
	=trailer(!lines = 1, !font_size = !base_font_size)
	margin-bottom= 1em * !lines * !base_line_height / !font_size

	// Apply a border width without messing up the rhythm
	=border(!side, !width = 1px, !lines = 1, !font_size = !base_font_size)
	border-#{!side}-width= 1em * !width / !font_size
	padding-#{!side}= (1em / !font_size) * ((!lines * !base_line_height) - !width)

	=top-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
	+border("top", !width, !lines, !font_size)

	=bottom-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
	+border("bottom", !width, !lines, !font_size)