Om ongelijke spatiëring in uitgevulde browsertekst op een Mac te diagnosticeren, stelt u de alinea eerst in op uitlijning aan het begin. Test vervolgens één voor één de spatiëringsregels, regeleinden, kolombreedte en het laden van lettertypen. Met deze volgorde kunt u vaststellen welke wijziging de alinea daadwerkelijk verbetert.

Deze gids is bedoeld voor iemand die een gewone browserpagina inspecteert, zoals een abstractencatalogus met een smalle beschrijvingskolom. De taak is om ongewoon grote woordafstanden uit te leggen en een praktische correctie te kiezen. Alle voorbeeldlabels en afmetingen hieronder zijn synthetisch.

Wat ongelijke spatiëring u kan vertellen

Uitvulling verdeelt de beschikbare ruimte binnen een regel om de regelbox te vullen. Verschillende regels bevatten verschillende woorden en bieden verschillende mogelijkheden voor expansie, dus de tussenruimten hoeven niet overeen te komen. W3C laat browsers ook ruimte voor hun eigen uitvulalgoritmen; identieke CSS schrijft niet in elke browser identieke spatiëring voor. CSS Text Module Level 3

Onderscheid twee waarnemingen voordat u iets wijzigt. Als de meeste tussenruimten op één regel groter zijn dan die op de volgende, onderzoek dan de beschikbare breedte van de regel en de keuzes voor regelafbreking. Als één specifieke tussenruimte uitzonderlijk groot lijkt, inspecteer dan ook de tekst en opmaak rond die grens. Dit zijn diagnostische uitgangspunten, geen bewijs voor een specifieke oorzaak.

Een eenvoudige berekening verklaart waarom regels met weinig woorden aandacht verdienen. Stel dat een regel een beschikbare breedte heeft van 480 CSS-pixels en de inhoud vóór uitvulling 420 pixels inneemt. In een illustratief model dat de resterende 60 pixels gelijkmatig verdeelt over zes geschikte spaties, krijgt elke spatie er 10 pixels bij. Met slechts drie geschikte spaties en dezelfde resterende breedte krijgt elke spatie er 20 pixels bij. Dit zijn berekende voorbeelden, geen browsermetingen of universele weergaveformule.

De praktische les is om de woorden op de regel te inspecteren voordat u de tussenruimten zelf probeert bij te stellen. Een regel met weinig expansiemogelijkheden kan een probleem met regelafbreking zichtbaar maken dat met een algemene aanpassing van de spatiëring niet wordt opgelost.

Begin met één gecontroleerde vergelijking op uw Mac

Kies één alinea met het probleem en noteer de browserversie, paginazoom, geschatte kolombreedte en exacte tekst. Houd die omstandigheden gelijk terwijl u wijzigingen vergelijkt. Gebruik voor een neutrale testalinea: “Paneel amber bevat ronde tegels. Paneel zilver bevat vierkante tegels. Elk paneel heeft een kort label en een eenvoudige beschrijving.”

Klik in Chrome met Control ingedrukt op de alinea en kies Inspect. U kunt ook de ontwikkelaarstools openen met Command–Option–I en vervolgens het relevante element selecteren. Met browserontwikkelaarstools kunt u het huidige document inspecteren en HTML- en CSS-wijzigingen lokaal vooraf bekijken. Wat zijn browserontwikkelaarstools?

Selecteer het blok dat de alinea bevat, niet slechts een woord binnen een inline-element. Bekijk in Chrome het paneel Elements zowel Styles als Computed. Het eerste bevat toepasselijke declaraties, ook overschreven declaraties; het tweede helpt vaststellen welke waarden daadwerkelijk zijn toegepast. Gebruik het eigenschappenfilter om elke instelling te vinden. Referentie voor CSS-functies

Noteer text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family en font-size. Noteer ook de inhoudsbreedte van de alinea. Zo ontstaat een beknopt vergelijkingsverslag: oorspronkelijke situatie, één wijziging, waargenomen resultaat.

Stel tijdelijk text-align: start en text-align-last: start in voor de alinea. Als de grote tussenruimten verdwijnen, draagt uitvulling bij aan het probleem. Blijven de tussenruimten bestaan, ga dan verder met controles van expliciete spatiëring en witruimte. Herstel de oorspronkelijke uitlijning voordat u de volgende afzonderlijke test uitvoert. Met DevTools kunt u declaraties in- en uitschakelen en waarden aanpassen voor livevoorbeelden. Wat zijn browserontwikkelaarstools?

Controleer expliciete spatiëring en behouden witruimte

Test met actieve uitlijning aan het begin word-spacing: normal. MDN definieert dit als de normale spatiëring die door het lettertype of de browser wordt bepaald; een lengtewaarde voegt spatiëring toe aan de intrinsieke woordspatiëring van het lettertype. Een positieve overgeërfde waarde kan dus relevant zijn, zelfs voordat uitvulling wordt toegepast. CSS-eigenschap word-spacing

Inspecteer het bovenliggende element en eventuele opgemaakte inline-kinderen als slechts een deel van de alinea verandert. Test de bestaande letter-spacing afzonderlijk in plaats van alle typografie-eigenschappen tegelijk terug te zetten. Als u twee instellingen tegelijk wijzigt, weet u bij verbetering niet welke ertoe deed.

Inspecteer vervolgens white-space. Bij normal worden gewone witruimtereeksen samengevoegd en loopt tekst zo nodig door op de volgende regel. Bij pre-wrap blijven witruimtereeksen en regeleinden uit de bron behouden, terwijl doorlopen naar een volgende regel mogelijk blijft. Bij pre-line worden spaties samengevoegd, maar veroorzaken regeleinden uit de bron nog steeds afbrekingen. Deze verschillen kunnen iets wat op een spatiëringsfout lijkt veranderen. CSS-eigenschap white-space

Test voor een gewone doorlopende beschrijving tijdelijk white-space: normal. Als het resultaat verbetert, inspecteer dan de oorspronkelijke tekst en witruimteregel voordat u een permanente wijziging kiest. Behoud betekenisvolle opmaak: een vooraf opgemaakt voorbeeld en een prozabeschrijving hebben verschillende vereisten. De test identificeert een invoer voor de lay-out; hij bewijst niet dat alle behouden witruimte moet worden verwijderd.

Onderzoek korte regels, geforceerde regeleinden en kolombreedte

Wordt de laatste regel uitgerekt?

Inspecteer text-align-last wanneer een korte afsluitende regel ongewoon grote tussenruimten heeft. Deze eigenschap bepaalt zowel de laatste regel van een blok als een regel direct vóór een geforceerde afbreking. Met text-align: justify lijnt het standaardgedrag auto zulke regels aan het begin uit; een expliciete waarde justify rekt ze uit. Test text-align-last: start om deze situatie afzonderlijk te bekijken. CSS-eigenschap text-align-last

Zoek naar een element br op de betreffende afbreekpositie. WHATWG definieert dit als een regeleinde in de inhoud en geeft aan dat het moet worden gebruikt wanneer de afbreking bij de inhoud hoort. Bekijk bij een gewone doorlopende beschrijving een afbreking die alleen is ingevoegd om één desktopindeling na te bootsen; laat de regelafbreking het regeleinde bepalen als dat het bedoelde gedrag is. HTML-standaard: het br-element

Volgt het probleem een smalle kolom?

Herstel de uitvulling en wijzig alleen de beschikbare breedte van de alinea. Probeer eerst een iets bredere kolom en daarna een smallere, zonder de tekst of het lettertype te wijzigen. Noteer welke woorden van regel veranderen en of de opvallende tussenruimten mee veranderen.

Gebruik dit als een beslissingstest. Als een bredere kolom betere regeleinden oplevert, pas dan de lay-out aan waar de ruimte dat toelaat. Als de beschrijving smal moet blijven en meerdere regels er nog steeds weinig woorden bevatten, is uitlijning aan het begin een praktisch alternatief. Kies geen breedte alleen omdat één voorbeeldalinea er toevallig netjes in past.

Zouden woordafbrekingen nuttige afbreekmogelijkheden bieden?

Test voor Engelse tekst hyphens: auto nadat u hebt gecontroleerd of de alinea zelf of een bovenliggend element de juiste waarde lang heeft, zoals en. Automatische woordafbreking hangt ervan af of de taal is ingesteld en of er een geschikt woordenboek beschikbaar is. Alleen het ontbreken van zichtbare afbreekstreepjes bewijst niet dat de CSS-declaratie is mislukt. CSS-eigenschap hyphens

Gebruik in deze test gewone woorden in plaats van zelfbedachte, onafgebroken identificatoren. Controleer daarna de hele alinea: het nuttige resultaat is een betere set regeleinden, niet alleen het verschijnen van een afbreekstreepje. Als automatische woordafbreking het resultaat in de doelbrowser niet verbetert, behoud dan de oplossing met breedte of uitlijning die wel werkte.

Onderscheid wijzigingen in lettertypen van browseruitvulling

Als regeleinden veranderen nadat de pagina voor het eerst verschijnt, onderzoek dan het laden van lettertypen voordat u schermafbeeldingen vergelijkt. De CSS Font Loading API biedt document.fonts.ready, een promise die wordt opgelost nadat het laden van lettertypen en de bijbehorende lay-out zijn voltooid. Dit biedt een nuttig synchronisatiepunt voor metingen, hoewel latere paginawijzigingen nog steeds een nieuwe vergelijking kunnen vereisen. CSS Font Loading API

Vergelijk voor een visuele test de oorspronkelijke alinea met een tijdelijke instelling font-family: system-ui, terwijl u de breedte en tekengrootte gelijk houdt. Beschouw elke verbetering als bewijs dat de lettertypekeuze invloed heeft op deze lay-out, niet als bewijs dat het oorspronkelijke lettertype defect is. In Firefox of Safari kan de weergave Fonts van de inspector helpen onderzoeken welke lettertypen op het geselecteerde element zijn toegepast. Wat zijn browserontwikkelaarstools?

Houd de grens van tekstvormgeving duidelijk. HarfBuzz vormt tekstsegmenten met gedeelde eigenschappen om tot gepositioneerde glyphs. De documentatie sluit regelafbreking in alinea's, woordafbreking en uitvulling expliciet uit. Een HarfBuzz-instelling wijzigen is daarom geen algemene oplossing in browser-CSS voor uitgerekte woordafstanden. Wat HarfBuzz niet doet

Bouw om dezelfde reden geen vervangende lay-out door elk teken afzonderlijk te meten en te positioneren. Daarmee begeeft u zich op het terrein van tekstvormgeving en alinea-opmaak. Blijf bij gewone DOM-tekst de invoer voor de browserlay-out diagnosticeren en behoud de tekstweergaveketen.

Kies de correctie die door uw tests wordt ondersteund

Gebruik deze tabel om de waarnemingen om te zetten in een gerichte vervolgstap. Elke rij bevat een diagnostische gevolgtrekking; bevestig die door de oorspronkelijke situatie te herstellen en de geslaagde wijziging opnieuw uit te voeren.

Waarneming Wat u vervolgens onderzoekt Mogelijke correctie
Tussenruimten blijven bestaan bij uitlijning aan het begin Expliciete spatiëring en behouden witruimte Corrigeer de relevante declaratie of onbedoelde tekstopmaak
Alleen afsluitende regels worden uitgerekt Uitlijning van de laatste regel en geforceerde afbrekingen Lijn die regels aan het begin uit; controleer afbrekingen die alleen voor de presentatie zijn toegevoegd
Tussenruimten veranderen wanneer woorden op andere regels vallen Kolombreedte en beschikbare afbreekmogelijkheden Pas de breedte aan, test woordafbreking of gebruik uitlijning aan het begin
De lay-out verandert tijdens het laden Het laden en toegepaste lettertype Vergelijk nadat de lettertypen zijn geladen en verhelp het verschil dat met het lettertype samenhangt
Een wijziging van de uitvullingsmethode heeft geen effect Browserondersteuning en de toegepaste declaratie Gebruik ondersteunde uitlijnings- en lay-outinstellingen

Vertrouw niet op text-justify: inter-word als universele oplossing. MDN geeft momenteel aan dat text-justify beperkt beschikbaar is. Waar dit wordt ondersteund, kiest inter-word voor expansie op woordgrenzen, terwijl auto de browser de methode laat kiezen. Woordgrenzen kiezen garandeert geen kleine tussenruimten op een regel met weinig woorden. CSS-eigenschap text-justify

Als die eigenschap niet wordt ondersteund, gebruik dan de ondersteunde aanpak die uit uw vergelijking naar voren kwam: wijzig de uitlijning, vergroot de beschikbare regelbreedte, corrigeer onbedoelde witruimte of test taalafhankelijke woordafbreking. Controleer de uiteindelijke keuze opnieuw in elke doelbrowser bij vergelijkbare inhoudsbreedten. Browserverschillen bewijzen op zichzelf geen defect, omdat CSS geen volledig uitvullingsalgoritme vastlegt. CSS Text Module Level 3

Rond af zodra u het probleem met een herhaalbare vergelijking kunt verklaren: de oorspronkelijke alinea vertoont de grote tussenruimte, één vastgestelde wijziging verbetert die en het resultaat blijft bruikbaar bij de breedten die u nodig hebt. Behoud die kleinste effectieve correctie in de paginabron als u die beheert; inspecteert u alleen een openbare pagina, bewaar dan de waargenomen waarden en reproductiestappen als resultaat.

Bronnen