Typografi i høysetet
Hvem sa at lesing på internett ikke fungerer? Mitt argument er at dersom man legger opp til konsumering av tekst, og ikke salg av reklame og klikk, vil folk lese hva du har og si. Og hvis ikke, limte jeg inn en tekst av Isaac Asimov, så da burde det holde.
Typografien tar utgangspunkt i det gylne snitt. For å få til dette brukte jeg en kalkulator som beregner rette størrelser på elementer, og hvordan disse skal stå i forhold til hverandre. Dette ga meg et godt utgangspunkt, men det er viktig og ikke bare lene seg på hjelpemidlene. Man må som kjent kjenne reglene (eller kalkulere seg frem til de) for å bryte de.
For skrifttypen gikk jeg for forskjellige varianter av Helvetica Neue. Jeg liker kontrastene mellom de store tynne bokstavene og bruke litt tykkere på mindre størrelser.
Siden husker dine preferanser
Ofte sitter man sent på kveldene når man leser, og det kan bli ubehagelig å se på en hvit skjerm. Derfor la jeg inn en funksjon som "dimmer" lyset. Dette lagres i en cookie som leses hver gang brukeren besøker siden, og setter lyset slik han ønsker det. Det hele er en ganske enkel affære med PHP. Først implementerte jeg det med jQuery, men det plagde meg litt at DOM-en måtte laste før cookien ble lest. Med PHP skjer det mens siden laster, og man får ikke noe hopp fra lys til mørk som skjedde med javascript.
$expire=time()+60*60*24*365;
if (!isset($_COOKIE["light_mode"])) {
setcookie("light_mode", "lightmode", $expire);
} else {
setcookie("light_mode", $_COOKIE["light_mode"], $expire);
}Ganske enkelt sjekker jeg om en cookie allerede er satt, og setter en til "lys på" dersom ikke. Er det allerede satt en cookie, oppdaterer jeg når den går ut på dato. Jeg har valgt at mine cookies går ut på dato etter et år, men blir fornyet hver gang brukeren besøker siden. For å bruke innholdet i cookien, henter jeg den ut med PHP og setter den som en klasse på body-taggen.
<body class="<?php echo $_COOKIE["light_mode"]; ?>">Da er det bare å style resten med CSS avhengig av hvilken klasse som står i body-taggen.
Web = print
For at web skal føles som å lese noe på print, er det viktig å ha fokus på detaljene. Print har fordelen med at alt er i et format. Statisk innhold er mye lettere å tilpasse enn dynamisk. For meg var problemet med bryting av teksten i overskriften. Enten ville jeg ha alt på en linje, eller dele den i to: mellom navnet på historien og forfatternavnet. Dette lar seg ikke enkelt gjøre på web, så man må ty til javascript. Enkelt forklart kopierer jeg inn en tekststreng med samme formatering som overskriften og regner ut hvor mange bokstaver som får plass før teksten bryter.
var target_width = $('body').width();
var text = 'Lorem ipsum. I want to know how many chars of this text fit.';
var span = document.createElement('span');
document.body.appendChild(span);
span.style.whiteSpace = 'nowrap';
span.style.fontFamily = $('#headline').css("font-family");
span.style.fontSize = $('#headline').css("font-size");
var fit = text.length;
for (var i = 0; i < fit; ++i) {
span.innerHTML += text[i];
if ( $(span).width() > target_width) {
fit = i - 1;
break;
}
}
document.body.removeChild(span);Deretter er det bare å telle antall bokstaver i overskriften, og dersom det tallet er større enn antall bokstaver det er plass til, bryte den mellom navn og forfatter.
if ( $('#headline').text().length > fit ) {
str = document.getElementById('headline').innerHTML;
n = str.replace("<span","<br><span");
document.getElementById('headline').innerHTML = n;
}
else if ( $('#headline').text().length < fit ) {
str = document.getElementById('headline').innerHTML;
n = str.replace("<br><span", "<span");
document.getElementById('headline').innerHTML = n;
}Nok nerding, sett deg godt tilbake og les!