In mijn eerdere artikel Code Snippets en Syntax Highlighting in WordPress met correcte HTML heb ik al uitgebreid aandacht besteedt hoe je blokken met code (of normale tekst) exact kunt weergeven op je website zoals je het ook in je code editor gestructureerd hebt, dit met behulp van het pre element.
Alles binnen het pre element wordt namelijk exact weergegeven, inclusief witregels, tabs en spaties die je veelvuldig gebruikt in code snippets. De code is immers niet goed leesbaar als alles achter elkaar staat.
Het pre element is niet specifiek voor code, maar kan bijvoorbeeld ook gebruikt worden voor een gedicht waarbij de witregels, tabs en spaties belangrijk zijn om aan de websitebezoeker te tonen.
Als je niet weet dat het pre element bestaat, dan gaan er gegarandeerd zaken mis. Zo ook bij de ontwikkelaars van de Toolset Bootstrap theme. Dit is een thema waar alle CSS van Twitter Bootstrap 2.3.2 wordt gebruikt, dit gecombineerd met de onwetendheid over het pre en code element hebben de ontwikkelaars er toe gebracht eigen CSS toe te voegen aan hun thema dat alleen maar voor meer problemen zorgde in plaats van oplossingen!
CSS alternatief voor het pre element, white-space!
Met white-space hebben we het natuurlijk over de witruimte, en zoals inmiddels duidelijk kan het belangrijk zijn om dit aan de bezoeker van je website te tonen, bijvoorbeeld bij een blok met code of bij een tekst zoals een gedicht. Het gebruik van het pre element is hiermee afdoende, en veel meer dan dit hebben we eigenlijk niet nodig.
Ondanks dat veel code plaatsen achter elkaar in een code element de code compleet onleesbaar maakt, en je daarvoor dus het pre elementen moet gebruiken, heeft Toolset toch getest wat er dan gebeurd. Toolset kwam erachter dat de CSS van Twitter Bootstrap 2.3.2 hier zorgt voor een probleem, zichtbaar op onderstaande afbeelding.
Het klopt dat de CSS van Twitter Bootstrap 2.3.2 hiervan de oorzaak is. Normaliter zou dit nooit gebeuren bij het code element. Als je veel tekst plaats in het code element loopt dit normaliter door op de volgende regel: het is namelijk een inline element! Onderstaande afbeelding toont dus het gebruikelijk gedrag van het code element.
Hoe kan het dat dit niet meer werkt bij Twitter Bootstrap 2.3.2? Dit is omdat ze in hun CSS gebruik maken van white-space: nowrap (lees meer over de werking van nowrap). De reden dat Twitter Bootstrap 2.3.2 de inline werking van het code element teniet doet is simpel. Zij hebben het code element voorzien van een background en een border. Als het stukje code dan aan het einde van de zin afgebroken wordt, ziet het er simpelweg niet meer uit:
Door de CSS white-space: nowrap toe te voegen, staat het stukje code in zijn geheel op één regel:
Bijgevolg van dit is dat als er grote lappen code in het code element gestopt worden, zoals Toolset Bootstrap getest heeft, dit voor een probleem zorgt omdat alles geforceerd op één lijn blijft en dus buiten de kaders van je pagina terecht kan komen. Dat is natuurlijk niet erg galant, maar zolang je het code element ook daadwerkelijk gebruikt voor kleine stukjes code in je tekst, en het pre element voor grote blokken met code, zal het probleem zich echter ook niet voordoen. De CSS van Twitter Bootstrap 2.3.2 zal dus niet snel voor problemen zorgen bij een juiste toepassing van het code en pre element.
Omdat dit besef nog niet bij Toolset aanwezig was, gingen ze het (niet bestaande) probleem oplossen, zodat de white-space: no-wrap CSS van Twitter Bootstrap 2.3.2 weer ongedaan gemaakt werd:
/* Fix for code line breaks */
code {
white-space: pre !important; /* CSS 2.0 */
white-space: pre-wrap !important; /* CSS 2.1 */
white-space: pre-line !important; /* CSS 3.0 */
white-space: -pre-wrap !important; /* Opera 4-6 */
white-space: -o-pre-wrap !important; /* Opera 7 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap !important; /* HP Printers */
word-wrap: break-word !important; /* IE 5+ */
}Deze fix ging totaal niet samen met goed gebruik van het pre element en zorgde alleen maar voor meer problemen. Wat betreft het code element stond alles wel weer binnen de kaders van de pagina, maar door de background en border zit dat er dus niet uit! Dit is exact waarom Twitter Bootstrap 2.3.2 juist de white-space: nowrap had toegevoegd.
In het forumtopic CSS needs improvement heb ik dit voorgelegd en is hun CSS fix op mijn aanraden ook verwijderd uit Toolset Bootstrap versie 1.1 :-).
Natuurlijk hebben ze een punt dat als mensen tóch veel code plakken in het code element ze willen voorkomen dat deze helemaal lang word en buiten de kaders van de pagina komt. Daarom hebben ze een nieuwe fix toegevoegd:
/* Fix for code line breaks */
.entry-content code {
max-width: 100%;
}
Dit werkt als evenmin zoals je hier ziet:
[afbeelding nog toevoegen]
https://wp-types.com/forums/topic/code-line-breaks-fix-not-working/
Ik vraag me sowieso af of het verstandig CSS toe te passen op een class die aanwezig is vanwege hAtom microformat.
Meer informatie white-space:
http://code.stephenmorley.org/html-and-css/white-space-handling/
Geef een reactie