4 Apr 2006

De puntjes op de Ï met CSS

Categorie: Website ontwikkeling — lammert @ 14:52

De tijd bij het maken van een website gaat hem niet zitten in de grote lappen tekst of de basis layout. Veel meer in kleine neuzel dingetjes die triviaal lijken te zijn, maar toch voor grote problemen zorgen. Neem nu mijn pagina met een korte geschiedenis van Kazachstan. Op zich niets bijzonders zou je zeggen. Goed leesbaar, leuke plaatjes, een link hier en daar.

Maar laat ik nu eens de tweede paragraaf van deze pagina hier integraal kopieren:

De ons bekende geschiedenis van Kazachstan begint in de 6e eeuw voor Christus wanneer de macht van het Perzische Achaemenid Rijk zich uitstrekt tot voorbij de Amu-Darya rivier (de huidige grens tussen Turkmenistan en Uzbekistan). Tijdens het uitbreiden van zijn Rijk naar Centraal Azië versloeg Alexander de Grote in 330 vC de Perzen. Dit was de start van een nauwer contact tussen Europa en dit deel van Azië. De exacte datum waarop zijde vanuit China het westen bereikte blijft onbekend, maar de karavaanroutes door dit gebied tussen de twee grote beschavingscentra van de wereld op dat moment werden de belangrijkste routes voor de handel in deze gewilde stof en ze zijn nu bekend als de Zijderoute. In de eeuwen na het begin van onze jaartelling vestigden Turkse en Mongoolse stammen zich in dit gebied. De Islam werd door Arabieren in de 8e eeuw geïntroduceerd. De Mongoolse stammen onder leiding van Djengis Khan veroverden het gebied tussen 1219 en 1224 en het land werd daardoor deel van zijn grote Rijk.

Het wordt al duidelijk denk ik. Zoiets simpels als superscript om de zesde en achtste eeuw te schrijven verandert de hele layout. De browser denkt slim te zijn, ziet meer tekst aan de bovenkant en duwt vervolgens de hele regel naar beneden. Slechte leesbaarheid is het gevolg. Aan de ene kant willen we de superscript intakt laten, aan de andere kant moet de browser zijn normale gedrag hier negeren. De oplossing ligt in slim gebruik van CSS. Met CSS kun je de stijl van een webpagina veranderen. Wat we nu gaan doen is hier de stijl van het element <sup> aanpassen op zodanige wijze dat de lijnhoogte niet veranderd wordt. Er zijn twee acties te doen:

  • We moeten de browser vertellen dat de superscript tekst op de normale tekstlijn staat
  • Vervolgens verplaatsen we stiekum de superscript tekst toch een stukje omhoog

In CSS kan dit met

sup {
    vertical-align: baseline;
    position: relative;
    bottom: 0.5em;
}

De eerste actie vertelt de browser dat het sup element op de tekstlijn staat. Vervolgens vertellen we dat we een relatieve relocatie doen en met het bottom statement verplaatsen we het element vervolgens een hoogte die overeenkomt met 50% van de gebruikte karakterhoogte.

Dan ziet de tekst er plotseling als volgt uit:

De ons bekende geschiedenis van Kazachstan begint in de 6e eeuw voor Christus wanneer de macht van het Perzische Achaemenid Rijk zich uitstrekt tot voorbij de Amu-Darya rivier (de huidige grens tussen Turkmenistan en Uzbekistan). Tijdens het uitbreiden van zijn Rijk naar Centraal Azië versloeg Alexander de Grote in 330 vC de Perzen. Dit was de start van een nauwer contact tussen Europa en dit deel van Azië. De exacte datum waarop zijde vanuit China het westen bereikte blijft onbekend, maar de karavaanroutes door dit gebied tussen de twee grote beschavingscentra van de wereld op dat moment werden de belangrijkste routes voor de handel in deze gewilde stof en ze zijn nu bekend als de Zijderoute. In de eeuwen na het begin van onze jaartelling vestigden Turkse en Mongoolse stammen zich in dit gebied. De Islam werd door Arabieren in de 8e eeuw geïntroduceerd. De Mongoolse stammen onder leiding van Djengis Khan veroverden het gebied tussen 1219 en 1224 en het land werd daardoor deel van zijn grote Rijk.

En om deze elegante oplossing te vinden ben je zo weer een tijdje verder. Zoals gezegd, de tijd gaat niet zitten in de grote stukken maar in de details. Uiteraard kan dezelfde truc ook gebruikt worden voor subscript teksten die door <sub> worden aangeduid. Alleen de waarde bij het bottom statement moet dan in de CSS worden gewijzigd.

24 queries. 1.302 seconds.