Bert
Bos, leider
stijl-activiteitenCopyright © 1994–2021 W3C® Privacy
Gemaakt 27 maart 2011;
Laatste wijziging wo 06 jan 2021 05:40:49 UTC
Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Bert Bos
Zie ook de index van alle tips.
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.
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.
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.
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:
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.
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:
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}
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 november 2014 waren Prince en PDFReactor de enige bekende, experimentele implementaties.)
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 mogelijk wel een gaatje vlak voor de pijlpunt, want de huidige kladversie legt nog niet uit hoe de blokpunten rechts uitgelijnd kunnen worden. (We hebben hier een truc gebruikt: een beetje negatieve 'letter-spacing' helpt om het gat te dichten, maar dat is soms niet genoeg.)