Waarom is ASCII-art verkeerd uitgelijnd?

ASCII-art raakt meestal verkeerd uitgelijnd doordat de bestemming een proportioneel lettertype gebruikt, herhaalde spaties samenvoegt, tabs anders uitvouwt of regels afbreekt voordat de tekening klaar is. Herstel eerst het weergavegebied: gebruik een afgebakend codeblok of een pre-element, kies een monospace-lettertype, vervang tabs door spaties en houd elke regel binnen de smalste beschikbare breedte. De ClockTools ASCII-artgenerator toont live aantallen kolommen, rijen, tekens en bytes, zodat u de uitvoer kunt testen vóór het plakken.

Welke vier controles vinden de meeste uitlijnfouten?

Gebruik deze volgorde omdat elke stap een hele foutklasse uitsluit:

1. Lettertype: controleer of de bestemming de ASCII-art in een monospace-lettertype weergeeft.
2. Witruimte: controleer of herhaalde spaties en regeleinden behouden blijven.
3. Breedte: zoek de langste rij en vergelijk die met het smalste weergavegebied.
4. Tekens: zoek naar tabs, brede Unicode-symbolen, emoji of vervangende tekens die onverwacht veel cellen innemen.

Begin niet met het opnieuw tekenen van individuele letters. Als elke rij na hetzelfde punt afwijkt, is de structuur waarschijnlijk intact en verandert de renderer de afstand.

Waarom vervormt een proportioneel lettertype het beeld?

ASCII-art behandelt tekens als tegels in een raster. Een spatie, onderstrepingsteken, schuine streep en hoofdletter W moeten dezelfde celbreedte innemen om verticale onderdelen uitgelijnd te houden. Een proportioneel lettertype geeft tekens juist verschillende breedten. Daardoor neemt een rij met smalle letters niet dezelfde ruimte in als een rij met brede letters.

De generieke CSS-lettertypefamilie monospace vraagt de browser om een lettertype met gelijke tekenbreedten. De lettertyperichtlijnen van W3C noemen monospace als generieke familie; de CSS 2-definitie definieert een monospace-lettertype aan de hand van de vaste tekenbreedte.

Als u de pagina beheert, gebruik dan een voorgeformatteerd element en een reeks monospace-lettertypen:

<pre class="ascii-art">YOUR ART HERE</pre>

.ascii-art {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre;
  overflow-x: auto;
}

Zo blijft de tekening behouden zonder gedwongen regelafbreking. Horizontaal scrollen is vaak minder schadelijk dan een vervormde rechterrand.

Hoe veranderen spaties, tabs en regelafbreking de rijen?

Gewone HTML voegt reeksen spaties samen en behandelt regeleinden als witruimte in de tekststroom. De CSS-white-space-eigenschap bepaalt hoe spaties, regeleinden en regelafbreking worden verwerkt. pre behoudt de drie structurele kenmerken van gewone ASCII-art: herhaalde spaties, expliciete rijen en geen automatische regelafbreking.

Tabs zijn geen stabiele uitlijningseenheden. De ene editor gebruikt vier kolommen, de andere acht, en een webcomponent kan een eigen tabgrootte toepassen. Vervang vóór het delen elke tab door het bedoelde aantal spaties.

Spaties aan het einde van regels zijn ook kwetsbaar. Sommige editors verwijderen ze bij het opslaan en reviewtools kunnen ze verbergen. Kies een ontwerp waarvan de betekenisvolle rechterrand niet van onzichtbare eindspaties afhangt. Spaties aan het begin en binnen een regel blijven gemakkelijker behouden in een voorgeformatteerd weergavegebied.

Wat veranderde er in een gecontroleerde ClockTools-test?

Bij een live-test op 2026-09-01 werd ALIGN ingevoerd met het lettertype Standard FIGlet. Bij links uitlijnen meldde de generator 31 kolommen, 6 rijen, 159 tekens en 159 bytes. De zichtbare uitvoer was:

     _    _     ___ ____ _   _
    / \  | |   |_ _/ ___| \ | |
   / _ \ | |    | | |  _|  \| |
  / ___ \| |___ | | |_| | |\  |
 /_/   \_\_____|___\____|_| \_|

Door een doelbreedte van 40 kolommen en gecentreerde uitlijning te kiezen, werden spaties aan het begin onderdeel van de tekst. Het gerapporteerde resultaat groeide naar 65 kolommen en 380 tekens, hoewel de lettervormen niet veranderden. Dit is de belangrijkste waarneming: uitlijnen kan echte spaties toevoegen, waardoor een banner die in de generator gecentreerd lijkt te breed wordt voor zijn bestemming.

De tool scheidt ook de voorbeeldkleur van de onbewerkte tekst en biedt tekstgeoriënteerde TXT-, Markdown-, ANSI- en HTML-exports plus PNG. Die scheiding helpt voorkomen dat een decoratieve voorbeeldinstelling stilletjes de tekens verandert die u kopieert.

Hoe plakt u ASCII-art in Markdown of HTML?

Plaats de tekst op GitHub in een afgebakend codeblok. De GitHub-documentatie toont afbakening met drie backticks en beveelt lege regels eromheen aan. Voeg het label text toe als u niet wilt dat syntaxmarkering voor een programmeertaal de leestekens kleurt.

```text
YOUR ASCII ART
```

Zet bij een README de projectnaam als gewone kop vóór de ASCII-art. Schermlezers kunnen elk leesteken voorlezen; een decoratieve banner mag niet de enige plek zijn waar essentiële tekst staat.

Gebruik in HTML pre in plaats van een reeks niet-afbrekende spaties. Test de smalle weergave. Met de Realtime HTML-editor kunt u white-space: pre, pre-wrap en de normale tekststroom vergelijken zonder een productiepagina te bewerken.

Wanneer creëren Unicode-tekens een breedteprobleem?

Strikte ASCII-tekens zijn smal, maar veel moderne ASCII-art gebruikt kadertekens, arceringsblokken, emoji of andere Unicode-symbolen. Het East Asian Width-rapport van Unicode legt uit dat tekens in een layout smal of breed kunnen zijn en dat de breedte van dubbelzinnige tekens van de omgeving kan afhangen.

Een vervangend lettertype voegt nog een variabele toe. Als het gekozen monospace-lettertype een symbool mist, kan de browser dat uit een ander lettertype met andere afmetingen halen. Test in dezelfde terminal, chatapp of browser waarin de ASCII-art zal worden bekeken.

Kies voor de breedste compatibiliteit een eenvoudige reeks ASCII-tekens zoals @%#*+=-:. en vermijd emoji. Gebruik Unicode-blokken alleen als bekend is dat de bestemming ze consistent weergeeft.

Welke export moet u gebruiken als tekst niet uitgelijnd kan blijven?

Kies het formaat voor de bestemming, niet voor het generatorvoorbeeld:

Plak vóór het exporteren de onbewerkte tekst in het Online Kladblok om onbedoelde tabs te controleren, en vergelijk de versie vóór en na de wijziging met de Tekstverschilcontrole. Een vergelijking op tekenniveau vindt een verwijderde spatie die visueel kan worden gemist.

Als de bestemming geen monospace-tekst ondersteunt, codeafbakening verwijdert of lange regels afbreekt, beschouw die dan niet als een betrouwbaar tekstcanvas. Exporteer een PNG, voeg voor toegankelijkheid een gewoon tekstbijschrift toe en bewaar de oorspronkelijke tekst apart voor latere bewerkingen.