Om du vill diagnostisera ojämna mellanrum i marginaljusterad text i webbläsaren på en Mac börjar du med att ändra styckets justering till startjustering. Testa sedan avståndsregler, radbrytningar, kolumnbredd och teckensnittsladdning, en i taget. Den här ordningen hjälper dig att identifiera vilken ändring som faktiskt förbättrar stycket.

Den här guiden är till för dig som granskar en vanlig webbsida, till exempel en katalog med abstrakt och en smal beskrivningskolumn. Uppgiften är att förklara ovanligt stora mellanrum mellan ord och välja en praktisk korrigering. Alla exempel på etiketter och mått nedan är fiktiva.

Vad ojämna mellanrum kan visa

Marginaljustering fördelar det tillgängliga utrymmet på en rad så att textraden fyller sin radbox. Olika rader innehåller olika ord och har olika möjligheter till utökning, så mellanrummen behöver inte vara lika stora. W3C ger också webbläsare visst spelrum i sina algoritmer för marginaljustering; identisk CSS föreskriver inte identiska mellanrum i alla webbläsare. CSS Text Module Level 3

Skilj mellan två observationer innan du ändrar något. Om de flesta mellanrummen på en rad är större än på nästa rad bör du undersöka radens tillgängliga bredd och radbrytningsval. Om ett visst mellanrum ser ovanligt stort ut bör du också granska texten och formateringen runt den gränsen. Det här är utgångspunkter för felsökning, inte bevis på en viss orsak.

En enkel beräkning förklarar varför glesa rader bör uppmärksammas. Anta att en rad har en tillgänglig bredd på 480 CSS-pixlar och att innehållet upptar 420 pixlar före marginaljustering. I en förenklad modell där de återstående 60 pixlarna fördelas jämnt över sex mellanrum som kan utökas, får varje mellanrum 10 pixlar extra. Med bara tre mellanrum som kan utökas och samma återstående bredd får varje mellanrum 20 pixlar extra. Det här är beräknade exempel, inte mätningar av webbläsare eller en universell formel för rendering.

Den praktiska slutsatsen är att du bör granska orden som hamnade på raden innan du försöker justera själva mellanrummen. En rad med få möjligheter till utökning kan avslöja ett radbrytningsproblem som en global justering av mellanrummen inte löser.

Börja med en kontrollerad jämförelse på din Mac

Välj ett berört stycke och anteckna webbläsarversion, sidzoom, ungefärlig kolumnbredd och den exakta texten. Håll dessa förhållanden oförändrade medan du jämför ändringar. Använd följande neutrala teststycke: ”Den bärnstensfärgade panelen innehåller runda plattor. Den silverfärgade panelen innehåller fyrkantiga plattor. Varje panel har en kort etikett och en enkel beskrivning.”

Ctrl-klicka på stycket i Chrome och välj Inspect. Du kan också öppna utvecklarverktygen med Command–Option–I och sedan välja det relevanta elementet. Med webbläsarens utvecklarverktyg kan du granska det aktuella dokumentet och förhandsvisa ändringar i HTML och CSS lokalt. Vad är webbläsarens utvecklarverktyg?

Markera styckets omslutande block, inte bara ett ord inuti ett inline-element. Granska både Styles och Computed i Chromes panel Elements. Den förstnämnda visar tillämpliga deklarationer, även sådana som åsidosatts; den sistnämnda hjälper dig att se vilka värden som faktiskt används. Använd egenskapsfiltret för att hitta varje inställning. Referens för CSS-funktioner

Anteckna text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family och font-size. Notera också styckets innehållsbredd. Då får du en liten jämförelse med ursprungligt läge, en ändring och observerat resultat.

Ange tillfälligt text-align: start och text-align-last: start för stycket. Om de stora mellanrummen försvinner bidrar marginaljusteringen till problemet. Om mellanrummen finns kvar fortsätter du med att kontrollera uttryckliga avstånd och blanksteg. Återställ den ursprungliga justeringen innan nästa separata test. Med DevTools kan du slå av och på deklarationer och redigera värden för att förhandsvisa ändringar direkt. Vad är webbläsarens utvecklarverktyg?

Kontrollera uttryckliga avstånd och bevarade blanksteg

Med startjustering aktiverad testar du word-spacing: normal. Enligt MDN innebär det normalt avstånd som bestäms av teckensnittet eller webbläsaren; ett längdvärde lägger till avstånd till teckensnittets inbyggda ordavstånd. Ett positivt värde som ärvs kan därför spela roll även innan marginaljustering används. CSS-egenskapen word-spacing

Granska det överordnade elementet och eventuella formaterade inline-element om bara en del av stycket ändras. Testa befintlig letter-spacing separat i stället för att återställa alla typografiska egenskaper samtidigt. Om du ändrar två inställningar på en gång visar ett förbättrat resultat inte vilken av dem som gjorde skillnad.

Granska sedan white-space. Med normal slås vanliga sekvenser av blanksteg ihop och texten radbryts vid behov. Med pre-wrap bevaras sekvenser av blanksteg och radbrytningar i källtexten, samtidigt som radbrytning fortfarande är möjlig. Med pre-line slås blanksteg ihop, men radbrytningar i källtexten skapar fortfarande radbrytningar. Skillnaderna kan påverka det som ser ut som ett avståndsproblem. CSS-egenskapen white-space

För en vanlig löpande beskrivning testar du tillfälligt white-space: normal. Om resultatet förbättras bör du granska den ursprungliga texten och blankstegsregeln innan du väljer en permanent ändring. Bevara meningsfull formatering: ett förformaterat exempel och en prosabeskrivning har olika behov. Testet pekar ut en faktor som påverkar layouten; det visar inte att alla bevarade blanksteg bör tas bort.

Undersök korta rader, tvingade radbrytningar och kolumnbredd

Dras den sista raden ut?

Granska text-align-last om en kort avslutande rad har ovanligt stora mellanrum. Den här egenskapen styr både blockets sista rad och en rad omedelbart före en tvingad radbrytning. Med text-align: justify justerar standardbeteendet auto sådana rader mot starten; ett uttryckligt värde på justify drar ut dem. Testa text-align-last: start för att isolera det här fallet. CSS-egenskapen text-align-last

Leta efter ett element av typen br vid den berörda radbrytningen. WHATWG definierar det som en innehållsradbrytning och anger att det ska användas när radbrytningen hör till innehållet. För en vanlig löpande beskrivning bör du granska en radbrytning som lagts in enbart för att återskapa en viss datorlayout; låt radbrytningen avgöra var raden slutar när det är det avsedda beteendet. HTML-standarden: br-elementet

Följer problemet med en smal kolumn?

Återställ marginaljusteringen och ändra bara styckets tillgängliga bredd. Prova en något bredare kolumn och därefter en smalare, utan att ändra texten eller teckensnittet. Anteckna vilka ord som flyttas mellan raderna och om de påfallande mellanrummen flyttar sig med dem.

Använd detta som ett beslutstest. Om en bredare kolumn ger bättre radslut bör du justera layouten där utrymmet tillåter det. Om beskrivningen måste förbli smal och flera rader fortfarande ser glesa ut är startjustering ett praktiskt alternativ. Välj inte en bredd enbart för att ett exempelstycke råkar passa snyggt.

Skulle avstavning ge användbara radbrytningsmöjligheter?

För engelsk prosa testar du hyphens: auto efter att ha kontrollerat att stycket eller en förfader har rätt värde för lang, till exempel en. Automatisk avstavning förutsätter att språket är märkt och att en lämplig ordlista finns tillgänglig. Att inga synliga bindestreck förekommer bevisar inte i sig att CSS-deklarationen misslyckades. CSS-egenskapen hyphens

Använd vanliga ord i det här testet i stället för påhittade identifierare som inte kan delas. Kontrollera hela stycket efteråt: målet är bättre radslut, inte bara att ett bindestreck visas. Om automatisk avstavning inte förbättrar resultatet i webbläsaren du testar bör du behålla den lösning med bredd eller justering som fungerade.

Skilj teckensnittsändringar från marginaljustering i webbläsaren

Om radsluten ändras efter att sidan först har visats bör du undersöka teckensnittsladdningen innan du jämför skärmbilder. CSS Font Loading API tillhandahåller document.fonts.ready, ett löfte som uppfylls när teckensnittsladdningen och tillhörande layout är klara. Det ger en användbar synkroniseringspunkt för mätningar, även om senare ändringar på sidan fortfarande kan kräva en ny jämförelse. CSS Font Loading API

För ett visuellt test jämför du det ursprungliga stycket med en tillfällig inställning av font-family: system-ui, medan du håller bredd och teckenstorlek oförändrade. Se en förbättring som belägg för att teckensnittsvalet påverkar layouten, inte som bevis för att originalteckensnittet är felaktigt. I Firefox eller Safari kan inspektörens vy Fonts hjälpa dig att granska vilka teckensnitt som används för det markerade elementet. Vad är webbläsarens utvecklarverktyg?

Håll gränsen för textformning tydlig. HarfBuzz formar textsegment med gemensamma egenskaper till placerade glyfer. Dokumentationen anger uttryckligen att radbrytning av stycken, avstavning och marginaljustering inte ingår. Därför är en ändring av HarfBuzz-inställning ingen allmän CSS-lösning i webbläsaren för utsträckta mellanrum mellan ord. Vad HarfBuzz inte gör

Av samma skäl bör du inte bygga en ersättningslayout genom att mäta och placera varje tecken för sig. Då går du in på områdena textformning och styckeslayout. För vanlig DOM-text fortsätter du att felsöka webbläsarens layoutindata och behåller dess textåtergivningsflöde.

Välj korrigeringen som stöds av dina tester

Använd tabellen för att omsätta observationerna i ett fokuserat nästa steg. Varje rad beskriver en diagnostisk slutsats; bekräfta den genom att återställa det ursprungliga läget och upprepa ändringen som fungerade.

Observation Vad du bör undersöka härnäst Möjlig korrigering
Mellanrummen finns kvar med startjustering Uttryckliga avstånd och bevarade blanksteg Korrigera den berörda deklarationen eller oavsiktlig textformatering
Bara de avslutande raderna dras ut Justering av sista raden och tvingade radbrytningar Använd startjustering för de raderna; granska radbrytningar som bara gäller presentationen
Mellanrummen flyttar sig när orden radbryts om Kolumnbredd och tillgängliga radbrytningsmöjligheter Justera bredden, testa avstavning eller använd startjustering
Layouten ändras under laddning Teckensnittsladdning och det teckensnitt som används Jämför när teckensnitten har laddats klart och åtgärda skillnaden som beror på teckensnittet
En ändring av marginaljusteringsmetod saknar effekt Webbläsarstöd och den deklaration som används Använd justerings- och layoutinställningar som stöds

Förlita dig inte på text-justify: inter-word som en universallösning. MDN anger för närvarande att text-justify har begränsad tillgänglighet. Där egenskapen stöds väljer inter-word utökning vid ordgränser, medan auto låter webbläsaren välja metod. Att välja ordgränser garanterar inte små mellanrum på en gles rad. CSS-egenskapen text-justify

Om egenskapen inte stöds använder du den lösning som dina jämförelser visade fungerade: ändra justeringen, öka den tillgängliga radbredden, korrigera oavsiktliga blanksteg eller testa språkmedveten avstavning. Kontrollera slutresultatet i varje webbläsare du riktar dig till, med jämförbara innehållsbredder. Webbläsarskillnader visar inte i sig att det finns ett fel, eftersom CSS inte anger en enda fullständig algoritm för marginaljustering. CSS Text Module Level 3

Du är klar när du kan förklara problemet med en upprepningsbar jämförelse: det ursprungliga stycket ger det stora mellanrummet, en identifierad ändring förbättrar det och resultatet fungerar fortfarande vid de bredder du behöver. Om du underhåller sidan behåller du den minsta effektiva korrigeringen i sidans källkod. Om du bara granskar en offentlig sida sparar du de observerade värdena och stegen för att återskapa problemet som ditt resultat.

Källor