Om een leesteken met een spatie ervoor op een webpagina bij het voorafgaande woord te houden, vervang je de gewone spatie door een vaste spatie of plaats je het paar in een kleine CSS-span die niet mag afbreken. Gebruik op je Mac een lokale HTML-test om het resultaat bij verschillende breedtes te controleren.

Deze handleiding is bedoeld voor iemand die op een Mac de tekst of HTML van een pagina bewerkt, bijvoorbeeld een abstract label zoals Beta : in een smalle kaart. Het doel is de zichtbare spatie te behouden en tegelijk te voorkomen dat de dubbele punt alleen naar de volgende regel wordt verplaatst. In de voorbeelden blijft die spatie bewust behouden.

Welke oplossing kies je?

Bepaal eerst of de spatiëringsregel in de tekst zelf thuishoort of bij de vormgeving van de pagina. Unicode definieert U+00A0 NO-BREAK SPACE als de vaste tegenhanger van een gewone spatie en U+202F NARROW NO-BREAK SPACE als de smallere variant. Zo heb je twee verschillende opties voor de zichtbare spatiëring. Unicode Standard, hoofdstuk 6

Je bewerksituatie Aanbevolen startpunt Wat je controleert
Je kunt de tekst aanpassen en wilt een spatie met normale breedte Vervang de gewone spatie door U+00A0 De opgeslagen tekst bevat nog steeds het vaste-spatieteken
Je wilt bewust een smallere spatie Gebruik U+202F Het resultaat ziet er passend uit in het daadwerkelijke lettertype van de pagina
Je wilt een gewone spatie in de tekst behouden Pas white-space: nowrap toe op een span met het hele paar De span bevat het woord, de spatie en het leesteken
Je kunt de pagina alleen bekijken Pas de tekst aan in de bewerkbare bron of vraag de beheerder Een lokale proef verandert de oorspronkelijke pagina niet

Schrijf in HTML-broncode Beta :. De tabel met tekenverwijzingen van WHATWG koppelt   aan U+00A0. Vervang de bestaande spatie; laat geen gewone spatie vóór de verwijzing staan. HTML Standard: benoemde tekenverwijzingen

Gebruik voor een vormgevingsregel een inline span met Beta : en pas white-space: nowrap toe op die span. Laat de omliggende alinea normaal afbreken. MDN beschrijft dat white-space zowel de verwerking van witruimte als het afbreken regelt. MDN: white-space

De praktische keuze hangt af van hoeveel tekst bij elkaar moet blijven. Houd in dit voorbeeld alleen Beta : bij elkaar. Tile Alpha Beta : Next tile bij elkaar houden zou de hele tekst van het label onnodig beperken. Begin met de kleinste eenheid die de bedoelde relatie uitdrukt.

Een lokale test maken met Teksteditor

Maak een apart testbestand voordat je een bestaande pagina wijzigt. Apple beschrijft hoe je Teksteditor in plattetekstmodus gebruikt om HTML-bestanden te maken, ze met de extensie .html opslaat en bij de prompt Gebruik .html kiest. Werken met HTML-documenten in Teksteditor op de Mac

  1. Open Teksteditor en kies Archief > Nieuw.
  2. Kies Opmaak > Maak platte tekst.
  3. Plak het volledige voorbeeld hieronder.
  4. Kies Archief > Bewaar en geef het bestand de naam punctuation-test.html.
  5. Kies Gebruik .html als daarom wordt gevraagd.
  6. Open in Safari het opgeslagen bestand via Archief > Open bestand.

Dit is een volledig zelfstandig HTML-document. Het vereist geen bibliotheek, installatie of netwerkverbinding. De drie kaarten gebruiken dezelfde synthetische tekst, maar elk behandelt de spatie voor de dubbele punt anders.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

Met een parser is gecontroleerd hoe de tekenverwijzing in het voorbeeld wordt omgezet: &nbsp; wordt U+00A0. Tijdens het voorbereiden is de weergave in een browser niet getest. Gebruik de volgende vergelijking om de indeling in de browser op je Mac te controleren.

Vergelijk het afbreekpunt, niet één schermafbeelding

De voorbeeldbreedte 14ch is een startpunt, geen gegarandeerd omslagpunt. Verander deze in 10ch, bewaar het bestand en laad het opnieuw. Probeer daarna 18ch. Zoek een breedte waarbij de dubbele punt in de kaart met de gewone spatie loskomt van Beta. In de twee beschermde versies moeten Beta en de dubbele punt bij elkaar blijven, terwijl andere woorden naar de volgende regel mogen gaan.

Als alle drie de kaarten aanvankelijk hetzelfde lijken, betekent dat niet dat de spaties hetzelfde werken. Er is misschien gewoon genoeg ruimte voor het paar. Pas de breedte aan tot de relevante grens bij het regeleinde komt en vergroot daarna de tekst; herhaal de proef.

Kies bij het opnieuw openen van het bestand in Teksteditor Archief > Open, selecteer het bestand, kies Toon opties en selecteer zo nodig Negeer rich-text-opdrachten. Apple beschrijft ook de instelling Toon HTML-bestanden als HTML-code in plaats van als opgemaakte tekst. Met deze opties kun je de broncode rechtstreeks bewerken. Apples instructies voor HTML in Teksteditor

Waarom werkt een vaste spatie soms toch niet?

Een vast teken werkt binnen de regels van de browser voor tekststromen. Controleer voordat je meer onzichtbare tekens toevoegt of het probleem wordt veroorzaakt door de inhoud, een afwijkende CSS-regel of de grens van een lay-outelement.

De pagina toont de verwijzing letterlijk

Als de pagina de tekens &nbsp; weergeeft, is je invoer als tekst behandeld in plaats van als HTML-tekenverwijzing verwerkt. Gebruik in een HTML-bronveld Beta&nbsp;:. Voer in een gewoon tekstveld het daadwerkelijke vaste-spatieteken in.

Hetzelfde onderscheid geldt voor JavaScript. Een tekenreeks toewijzen via textContent maakt tekst aan; HTML-verwijzingen worden daardoor niet verwerkt. Een JavaScript-tekenreeks kan het teken bevatten als "Beta\u00A0:". Wijs ook niet textContent toe aan een hele opgemaakte alinea om één spatie te herstellen: daarmee vervang je de bestaande onderliggende elementen. MDN: Node.textContent

Een CSS-regel staat ongebruikelijk agressief afbreken toe

Controleer op line-break: anywhere. MDN beschrijft dat deze waarde afbrekingen rond typografische tekeneenheden toestaat, ongeacht afbreekverboden die samenhangen met klassen voor verbindende spaties en woordverbinders. Een toegevoegd vast teken kan dus niet worden beschouwd als een onvoorwaardelijke overschrijving van die instelling. MDN: line-break

Controleer ook overflow-wrap. De waarde anywhere staat toe dat een reeks die anders niet kan worden afgebroken, zo nodig toch wordt gesplitst om overloop te voorkomen. Dit noodgedrag verschilt van een gewone afbreking bij een spatie. MDN: overflow-wrap

Gebruik een lokale span zonder afbreking als de vormgeving vereist dat het hele korte paar intact blijft. Controleer welke regel daadwerkelijk op die span wordt toegepast, vooral als het stijlblad van de pagina specifiekere selectors bevat. Houd de aanpassing lokaal, zodat lange, niet-gerelateerde tekst op de bestaande manier blijft afbreken.

Het leesteken staat in een afzonderlijk lay-outvak

Controleer of de dubbele punt gewone inline-tekst is of in een inline-block of een andere atomische inline staat. W3C beschrijft speciale afbreekmogelijkheden rond atomische inline-elementen, met een uitzondering voor aangrenzende vaste spaties. Een spatie naast zo’n vak werkt niet hetzelfde als een spatie binnen één doorlopende tekststroom. CSS Text Module Level 3: details over regelafbreking

Houd voor dit eenvoudige label het woord, de spatie en het leesteken in één gewone inline span. Verwijder een expliciete <br> ertussen als het de bedoeling is dat de tekst automatisch afbreekt; nowrap onderdrukt zachte regeleinden, maar verwijdert geen geforceerde regeleinden. CSS Text Module Level 3: witruimte en afbreken

Hoe behoud je browservormgeving en ga je om met krappe indelingen?

Houd elk woord intact in plaats van de afzonderlijke letters ervan af te breken. W3C definieert wanneer vormgeving over inline-grenzen heen moet doorlopen en wanneer wijzigingen zoals tussenliggende opvulling, randen of uitlijning dit moeten onderbreken. Een gewone inline span voorkomt onnodige opmaakgrenzen. CSS Text Module Level 3: vormgeving over elementgrenzen heen

Er blijft wel een fysieke beperking: voor het beschermde paar is voldoende horizontale ruimte nodig. Als de container smaller wordt dan Beta :, kan het bij elkaar houden van het paar tot overloop leiden. Test die situatie bewust. Kies vervolgens een passende reactie in de indeling, zoals de kaart verbreden of het label inkorten, in plaats van de betreffende tekst te verbergen. Het gedrag zonder afbreking wordt beschreven in de definitie van white-space door W3C.

Heb je een bibliotheek voor regelafbreking nodig?

Voor een gewone webpagina niet. De genoemde bibliotheek linebreak berekent mogelijke afbreekpunten volgens Unicode; de documentatie laat de daadwerkelijke regelkeuze expliciet over aan software die de beschikbare breedte en de weergegeven tekstgrootte kent. In de README staat momenteel dat Unicode-versie 13 wordt ondersteund. Documentatie van foliojs/linebreak

Dit onderscheid is van belang als een andere tool de bibliotheek al gebruikt. Een lijst met mogelijke afbreekpunten geeft niet aan waar een browser tekst met vormgeving zal afbreken. Laat voor deze taak het lettervormen en de uiteindelijke regelindeling aan de browser over en geef de gewenste beperking aan met het teken of lokale CSS.

Controleer drie dingen voordat je de aanpassing overzet: de spatie blijft zichtbaar, het woord en het leesteken blijven bij elkaar wanneer ze dicht bij een regeleinde staan, en de omliggende tekst kan nog steeds afbreken. Gebruik een vaste spatie als de relatie in de tekst thuishoort, of een smal afgebakende span zonder afbreking als die bij de vormgeving hoort. Controleer de daadwerkelijke pagina opnieuw op de kleinste bruikbare breedte.

Bronnen