Talen

Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Bert Bos

Stijlbladen voor het Web CSS-tips & trucs

Zie ook de index van alle tips.

Blokpunten

Typografen spreken van „blokpunten” bij de rij puntjes die kolommen in een tabel met elkaar verbindt, zoals hier:

Puntjes komen het meest voor, maar je kunt ook ander symbolen gebruiken, zoals streepjes of een lijn met een pijl. Ze helpen de delen visueel met elkaar te verbinden aan weerszijden van een variabele opening.

CSS krijgt binnenkort in principe echte blokpunten, die voor of achter een element kunnen worden toegevoegd om de opening naar het volgende element te overbruggen. Maar laten we eens kijken naar een truc om ze met CSS niveau 2 te simuleren.

De methode hieronder is niet de eerste of de enige poging om met CSS tekst uit te punten. De eerste was het werk van Tantek Çelik. Zijn Bella Mia menu werd gemaakt, je raadt het al, tijdens een diner in een restaurant genaamd Bella Mia, ver terug in het jaar 2000. Een paar andere voorbeelden zijn van Micah Sittig en Brett Merkey.

De opmaak

Het restaurant-menu uit het voorbeeld is opgemaakt als een lijst:

<ul class=leaders>
<li><span>Salmon Ravioli</span>
 <span>7.95</span>
<li><span>Fried Calamari</span>
 <span>8.95</span>
<li><span>Almond Prawn Cocktail</span>
 <span>7.95</span>
<li><span>Bruschetta</span>
 <span>5.25</span>
<li><span>Margherita Pizza</span>
 <span>10.95</span>
</ul>

Er is niets speciaals aan deze opmaak. Ik heb voor een lijst gekozen omdat een menu semantisch gezien een lijst is. De twee kolommen van het menu moeten wel in afzonderlijke elementen staan. In dit geval staan ze beide in een SPAN.

CSS-regels

We maken de blokpunten met een pseudo-element ‘:before’ dat aan het LI-element is gehangen. Het pseudo-element vult de volle breedte van het item met puntjes en de SPANs worden er bovenop geplaatst. De witte achtergrond van de SPANs onttrekt de puntjes aan het gezicht en ‘overflow: hidden’ op de UL zorgt ervoor dat de puntjes niet buiten de lijst komen:

ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white}

Ik heb willekeurig 80 puntjes gebruikt, wat genoeg is om zo'n 38em te vullen, vandaar de maximale breedte van de lijst. De ‘:before’ heeft een breedte van nul gekregen, zodat hij in feite geen ruimte inneemt en de andere tekst over de puntjes heen komt te staan.

De ‘padding: 0’ en ‘list-style: none’ zijn er alleen om de normale stijl van een lijst te onderdrukken. Ik heb gekozen voor een lijst-opmaak, maar ik wilde geen bullets vóór de items.

Het koppelen van de puntjes aan het item, i.p.v. aan de SPAN, heeft als voordeel dat op deze manier de puntjes keurig verticale lijnen vormen. Dat is vaak een gewenst effect als je verscheidene lijnen achter elkaar uitpunt.

Variaties

Hier zijn een aantal variaties met verschillende tekens voor de blokpunten. De eerste heeft een hoge punt in plaats van een gewone punt. De stijl-regels zijn exact gelijk, alleen de gegenereerde tekst heeft nu “·” in plaats van “.”:

Een bullet is als een hoge punt, maar groter:

Met een dubbelepunt:

Deze blokpunten zijn gekleurde plus-tekens zonder spaties ertussen:

Een uitgerekte pijl

De laatste variatie is een beetje anders. De tekst is hier uitgepunt met een pijl en de uitdaging is niet om te tekens verticaal op één lijn te krijgen, maar om de pijlpunt precies aan het eind van de opening te plaatsen. Daarom zijn de blokpunten niet aan het item gekoppeld, maar aan het element met de prijs. Bekijk de broncode van deze pagina om te zien hoe het werkt.

Blokpunten met tekst over meerdere regels

Maar wat als de tekst vòòr de blokpunten zo lang is dat hij over meer dan één regel loopt? De rij puntjes moet in dat geval lager staan, niet achter de eerste regel, maar achter de laatste. Zonder de voorgestelde nieuwe eigenschappen voor CSS niveau 3 kunnen we dat niet in alle gevallen oplossen, maar we kunnen het wel redelijk laten lijken in eenvoudige gevallen.

We moeten daarvoor aannemen dat de tekst achter de blokpunten kort genoeg is dat die wel op één regel past. En dan maken we de puntjes niet vast aan het begin van de tekst (':before'), maar aan het eind (':after'), zodat ze zichtbaar zijn achter de laatste regel, in plaats van de eerste. Zo ziet dat eruit:

CSS-regels voor lange tekst

De CSS-regels zijn hetzelfde als hiervoor, behalve dat we nu de selector ''ul.leaders li:after' in plaats van 'ul.leaders li:before' gebruiken.

En er is één extra subtiliteit: omdat de puntjes nu logischerwijs achter de laatste tekst staan, worden ze bovenop, in plaats van onder de tekst getekend. We moeten ervoor zorgen dat die tekst boven de puntjes uit wordt getild, zodat de puntjes niet zichtbaar zijn waar de tekst staat. CSS heeft daarvoor de eigenschap 'z-index'. Die werkt alleen voor gepositioneerde elementen en dus moeten we twee declaraties toevoegen. De complete regels zijn:

ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.leaders li:after {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white;
    position: relative;
    z-index: 1}

Blokpunten in niveau 3

De blokpunten (Engels: „leaders”) in niveau 3 van CSS zijn (als ik dit schrijf, maart 2011) nog in ontwikkeling, maar uiteindelijk zullen ze de voorbeelden hierboven veel makkelijker maken.

Het eerste voorbeeld versimpelt:

ul.leaders {
    padding: 0;
    list-style: none}
ul.leaders span:first-child:after {
    content: leader(dotted)}

En dat duwt automatisch de tweede SPAN tegen de rechter kantlijn, zodat het niet nodig is er een float van te maken.

‘Dotted’ is een voorgedefinieerd sleutelwoord. Maar elk willekeurig teken kan tussen aanhalingstekens worden gezet, bijv. ‘leader("· ")’ voor het paar bestaande uit een hoge punt en een spatie. Hier zijn de voorbeelden nog een keer, nu met de voorgestelde niveau-3-eigenschappen. Ze werken waarschijnlijk nog niet. (In maart 2011 was Prince 7 de enige bekende, experimentele implementatie.)

De uitgepunte pijl bestaat uit het teken „horizontal line extension” (\23AF) en een pijl (\2192). In de meeste lettertypes passen ze niet aan elkaar, maar wel in het lettertype Symbol. Er is alleen wel een gaatje vlak voor de pijlpunt, want de huidige kladversie legt nog niet uit hoe de blokpunten rechts uitgelijnd kunnen worden.

Bert Bos, leider stijl-activiteiten
Copyright © 1994–2013 W3C®

Gemaakt 27 maart 2011;
Laatste wijziging do 12 dec 2013 06:20:47 CET

Talen

Over de vertalingen