I haven't been blogging or programming a whole lot over the past year, since I started teaching two Tanach (Bible) classes. Even two hours a week, irregularly, represents a lot of work, and pretty much has sucked up all my intellectual free time. So not much Javascript. But I have been recording the notes (sort of condensed essays, 1000–2000 words) online so I could refer to them, and I've learned something about creating a website that is text, not data or doing-stuff, oriented. The site is kavanot.me; the classes are Shiurim and Parasha.
I don't expect any reader of this blog to understand the Hebrew or the details of Biblical exegesis, but these notes are more about design issues and resources that would be relevant to almost anyone.
Structure
HTML5 makes the basic structure easy:
<body>
<header>
<h1></h1>
<nav></nav>
</header>
<article>
<section></section>
<article>
<footer>
</footer>
</body>I'm not a believer in side bars (unless I can get some money out of advertising!)
Words
People have been printing books for 500 years, and lots of rules and traditions have developed. Treat them like rules of grammar: you can violate them, but violate them intentionally, not out of ignorance. My source for those rules is Matthew Butterick, especially his summary (and it's worth paying for the book).
As he points out, websites tend to try to be efficient and cram as many letters into as little space as possible, which makes no sense (people do know how to scroll) and just makes the text hard to read.
So my CSS follows (the source file is kavanot.me/css/stye.scss). I use SCSS (actually scssphp) so I can use variables and calculations; I can't imagine going without it now.
Point Size
Butterick recommends 15-25 pixels for the font size; I use
$fontsize: 18px;
body { font-size: $fontsize; }
header { font-size: 120%; } /* 21.5px */
nav {font-size: 85%; } /* 15px */
footer { font-size: 75%; } /* 13.5px; this is a little small but seems appropriate
for the "fine print" part of the site */Line Spacing
Butterick recommends 120-145% of the point size. I use
$linespacing: 1.35;
body, h1, h2, h3, h4 { line-height: $linespacing; }
/* Need to set the line height for each header since they have different
font sizes and the line spacing has to be proportionate */Line Length
This was the hardest for me to acknowledge, but long lines make for hard-to-read text. Lines should be 45-90 characters long. That's less than 650 pixels for 18px type. It makes for lots of whitespace around the text; if I want my "page" to be 850px, I use:
$linewidth: $fontsize * 35; /* found empirically */
$width: 850px;
$linepadding:($width - $linewidth) / 2;
article { width: $width; }
section { padding: 0 $linepadding; }Note that since the standard box model calculates the width without including the padding, we set the padding on the child of the <article>.
Fonts
Butterick advises against "goofy" fonts, though I couldn't resist and used 1543 Humane Jenson (licensed for non-commericial use) for the "display" font (for headers). He also advises against using common fonts for esthetic reasons; you want your text to stand out. I'm not a typography guru and really couldn't tell the difference. I would have no problems with font-family: sans-serif and living with whatever your browser came up with.
But I need fonts with the full gamut of Hebrew glyphs, including properly placed diacritics. The only choices are those listed by Mechon Mamre, and I think the nicest by far is the SBL Hebrew font, with nice English glyphs as well, and very legible on screen and on paper.
To generate webfonts, I use FontSquirrel. But there are a few caveats. You have to select the Expert mode and select No Subsetting (or Custom Subsetting if you really want to limit the glyphs) to get all the foreign language glyphs. For the professional fonts with their own TrueType hinting, make sure to keep it (don't use the Font Squirrel hinting; it messed up the Hebrew badly).
Curly Quotes
I know I should use real quotes and apostrophes (“ ” ’) rather than the typewriter straight ones (" '), but who wants to keep typing “” all the time? I could use a PHP version of Markdown but I decided it would be more educational to write my own; I don't mind writing out straight HTML for most of the formatting.
The only trick is that you don't want to convert quotes inside tags: <a href="http://example.com"> should not become <a href=“http://example.com”>. But I solved that problem already. So all I need is this on the server side:
$text = preg_replace_text ('/"(.+?)"/', '“$1”', $text);
$text = preg_replace_text ('/\'(.+?)\'(\W)/', '‘$1’$2', $text);
$text = preg_replace_text ('/\'(\w)/', '’$1', $text);
$text = preg_replace_text ('/\.\.\./', '…', $text);
$text = preg_replace_text ('/--/', '—', $text);to handle curly quotes, apostrophes, ellipses and em-dashes. It's not perfect; if the quote contains tags it will fail, and the quotes come out the wrong way for Hebrew, but those are rare and I can hand-correct them.
Paragraphs
Butterick recommends 1–4 ems of space for first-line indents, or 4–10 points between paragraphs. I go for the latter: p { margin-bottom: 5px; }.
Design
All websites look the same, if you stand far away. Butterick has an essay decrying that, saying we need better, more innovative design. But he contradicts himself: all books look the same as well, if you stand far enough away. He argues that 500 years of print design experience have led to a set of common standards; I think 20 years of web design, while not quite 500 years, has led to a set of common standards that everyone expects when reading. When you see a site with a big graphic header, tabs/navigation bar under that, real text and pictures in the middle, ads and some more navigation on one or both sides, and fine print and fine navigation after scrolling all the way down, you're home. You know what to do, what to look for. Butterick has a lovely site for his Concourse font but it's unreadable; you can edit the type samples and download a PDF specimen file but that information is lost among all the pretty examples.
Enough screed. I want my site design to get out of the way; kavanot.me is probably less minimalist than I would create now but I've grown to like it. I need five colors: the main text contrasting with the background (a pale neutral) and another color for display text. I want a fixed page width (as above, 850px seems to work well) so I need an unobtrusive deep background color for the page outside that. And some kind of border/shadow between the page and the deep background.
I have no design or color sense, so I browse colourlovers.com palettes (which conveniently have five colors each) until I find something I like; kavanot.me uses Published in 1932.
So the CSS is:
body {
background-color: $deepbackgroundcolor;
}
header {
color: $displaycolor;
}
article {
background-color: $backgroundcolor;
color: $textcolor;
}Prior to CSS3, I would have use images created in Photoshop for a soft border; something like top.png: 
, middle.png: 
and bottom.png: 
, with CSS like:
header {
background: url('/images/top.png') no-repeat bottom;
}
article {
background: url('/images/middle.png') repeat-y center;
}
footer {
background: url('/images/bottom.png') no-repeat top;
}But now I can use the incredibly complicated box-shadow to create the border. box-shadow allows you to build up multiple shadows, so I can use a centered external shadow and an inset one. A straight centered shadow (box-shadow: 0 0;) would be hidden behind the element, so you have to use the spread value to make the shadow bigger, then adjust the blur to smooth out the edge into the deep background. I used:
article {
box-shadow:
inset 0px 0px 30px 30px $bordercolor, /* fade on the inside */
0px 0px 10px 10px $bordercolor; /* fade on the outside */
;
}And that gives me my subtle border with no images, easy-to-modify CSS, and degrades cleanly for browsers that don't support box-shadow.
More thoughts on web design as I get around to documenting them.
Leave a Reply