För att separera ett trångt bokstavspar bör du först kontrollera rubrikens teckenavstånd och teckenparkerning. För en kort latinsk etikett kan en lokal inline-marginal öppna en gräns, men den avbryter formningen där. Det här Mac-arbetsflödet förklarar när den avvägningen är lämplig.

Beror problemet på teckenavstånd, kerning eller en lokal kollision?

Den här guiden riktar sig till dig som justerar en webbrubrik på en Mac och kan redigera dess HTML och CSS. Uppgiften är att förbättra ett besvärligt bokstavspar och samtidigt låta resten av texten följa webbläsarens normala flöde. Den syntetiska rubriken NOVA STUDIO ger ett konkret exempel; det betyder inte att dessa bokstäver kolliderar i alla typsnitt.

Teckenavstånd styr mellanrummen i ett texturval. I CSS hanteras detta med letter-spacing: positiva värden ökar avståndet, medan negativa värden minskar det. Om du ökar den egenskapen för hela rubriken ändras alltså mer än det besvärliga bokstavsparet. Börja med att kontrollera om ett ärvt negativt värde orsakar problemet. MDN: letter-spacing

Kerning använder avståndsinformation som finns lagrad i typsnittet. CSS-egenskapen font-kerning godtar auto, normal eller none; den godtar inte ett anpassat avstånd för ett namngivet bokstavspar. Om du anger normal begär du typsnittets kerninginformation, men det kan inte lägga till en saknad parjustering eller garantera att en viss kombination ser bra ut. MDN: font-kerning

Använd det här beslutsstödet innan du lägger till markering:

Det du ser Första åtgärd När du går vidare
De flesta mellanrum ser för trånga ut Jämför rubriken med letter-spacing: normal Gå vidare bara om ett bokstavspar fortfarande behöver justeras
Rubriken ser annorlunda ut efter att en textanimation har startat Jämför med den ursprungliga texten utan uppdelning Undersök hur uppdelningen görs innan du försöker kompensera
En gräns ser trång ut i ett annars godtagbart kort latinskt ord Överväg en lokal avståndsjustering Acceptera att formningen ändras vid den gränsen
Den ursprungliga formningen måste bevaras exakt Behåll textsegmentet intakt och jämför med ett annat lämpligt typsnitt eller en annan typsnittsversion Välj en återgivning som fungerar utan att införa en gräns

På en sida du granskar i Chrome trycker du på Command–Option–C och klickar sedan på rubriken. Panelen Elements markerar dess markering, och fliken Styles visar tillämplig CSS. Leta efter rubrikregler, ärvt teckenavstånd och omslag runt enskilda tecken. De här granskningsstegen följer Chromes dokumenterade arbetsflöde för Mac. Öppna Chrome DevTools

Gör jämförelser med avsedd teckenstorlek, vikt och rubrikstorlek. En korrigering som valts för exempeltexten i Arial är bara en demonstration; välj den faktiska justeringen medan du visar den avsedda rubriken. Anteckna de ursprungliga deklarationerna så att du kan jämföra en ändring i taget.

Vad kan en lokal justering bevara?

En vanlig span ger en formateringskrok utan att tillföra någon egen betydelse. Den representerar sina barn, så en rubrik kan behålla texten NOVA STUDIO samtidigt som en klass identifierar prefixet som slutar vid den besvärliga gränsen. WHATWG HTML Standard: span-elementet

Ett inline-omslag och en avståndsjustering får dock olika konsekvenser. W3C:s aktuella utkast till rekommendation för CSS Text Level 3 anger att formningen ska förbli kontinuerlig över inline-gränser när ingen effektiv formateringsändring sker. Det anger också att en icke-noll inline-marginal, kantlinje eller utfyllnad som skiljer tecken åt bryter formningen vid den gränsen. En lokal marginal kan därför inte garantera att den ursprungliga kerningen bevaras över det justerade bokstavsparet. CSS Text Module Level 3: Formning över elementgränser

I exemplet placerar du NOV i ett inline-span och låter A stå direkt efter det. Om du lägger till en slutmarginal på prefixet öppnas gränsen mellan V och A. De andra bokstäverna förblir vanlig inline-text; du behöver inte ge varje tecken en separat ruta. I horisontell text som löper från vänster till höger motsvarar margin-inline-end höger marginal. MDN: margin-inline-end

Begränsningen är viktig när du bedömer resultatet: den synliga förändringen omfattar både förlusten av eventuell formningsjustering över den gränsen och den tillagda marginalen. Resultatet är inte nödvändigtvis det ursprungliga avståndet mellan bokstavsparet plus exakt det angivna avståndet. Om den ursprungliga formningen måste bevaras ska du behålla textsegmentet intakt och jämföra typsnitt i stället.

Prova ett komplett lokalt exempel på din Mac

Skapa en separat förhandsvisning innan du anpassar tekniken till en rubrik du underhåller. I TextEdit väljer du File → New och sedan Format → Make Plain Text. Klistra in hela dokumentet nedan, spara det som pair-preview.html och välj Use .html om du får frågan. Apple beskriver den här processen för att skapa HTML-filer. Arbeta med HTML-dokument i TextEdit på Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Öppna det sparade dokumentet i webbläsaren. Behåll texten i rubriken på den enda källraden som visas: det finns inget mellanslag mellan NOV och A, och ett vanligt mellanslag före STUDIO. Då behåller etiketten sin ursprungliga formulering i stället för att ett synligt eller särskilt avståndstecken läggs till.

Den anpassade egenskapen --pair-gap styr marginalen vid den valda gränsen. Startvärdet är illustrativt. Vid en teckenstorlek på 64px motsvarar 0.02em en marginal på 1.28 CSS-pixlar; vid 40px motsvarar det 0.8 CSS-pixlar. Marginalen skalar med textstorleken, men du måste ändå granska den visuella justeringen. MDN beskriver marginaler med em som relativa till textstorleken. MDN: margin-inline-end

Det yttre span-elementet .keep-word tillämpar white-space: nowrap endast på NOVA. Det håller ihop det korta ordet och låter samtidigt det vanliga mellanslaget före STUDIO avgöra var radbrytning kan ske. Undvik att tillämpa egenskapen på hela rubriken om du inte avsiktligt behöver en obruten rad. MDN: white-space

Om TextEdit senare öppnar filen som formaterat innehåll väljer du File → Open, markerar filen, väljer Show Options och sedan Ignore rich text commands. Du kan också aktivera Display HTML files as HTML code instead of formatted text under TextEdit → Settings → Open and Save. Apples HTML-guide för TextEdit

Hur väljer du den minsta användbara justeringen?

Gör en kontrollerad jämförelse i stället för att gång på gång öka avståndet tills det drar blickarna till sig:

  1. Ställ in --pair-gap på 0em, spara och läs in sidan igen. Kontrollera den ojusterade rubriken först.
  2. Prova 0.01em och sedan 0.02em, och spara och läs in sidan igen mellan jämförelserna. Det här är testvärden, inte rekommenderade typografiska standarder.
  3. Bedöm bokstavsparet tillsammans med de närmaste bokstäverna. Sluta när det passar in i ordets övergripande rytm.
  4. Gör webbläsarfönstret smalare tills rubriken radbryts. Kontrollera hela rubriken, inte bara de justerade bokstäverna.
  5. Upprepa vid varje rubrikstorlek och vikt som faktiskt används i layouten.

Var försiktig när du jämför nollmarginal med en marginal större än noll. När värdet passerar noll uppstår den formningsgräns som beskrivits tidigare, så den första förändringen kan vara större än vad det numeriska marginalvärdet antyder. Om ett litet positivt värde redan gör bokstavsparet för glest ska du ta bort lösningen och se över typsnittet eller rubrikens befintliga formatering.

Justeringen tar också upp utrymme i layouten. Bokstäverna efter gränsen flyttas med texten, och en rubrik som nästan fyller det tillgängliga utrymmet kan radbrytas annorlunda. Lokal avståndsjustering undviker att lägga till teckenavstånd vid varje mellanrum, men den garanterar inte att radslutet förblir oförändrat. Kontrollera layouten i både smala och breda fönster innan du behåller ändringen.

Begränsa omslaget som förhindrar radbrytning till ett kort ord. Om själva ordet är längre än det tillgängliga utrymmet kan det flöda utanför. Minska rubrikstorleken i den layouten eller se över omslaget i stället för att dölja överflödet. MDN skiljer mellan styrning av radbrytning med white-space och egenskaper som tillåter radbrytning inuti ord. MDN: white-space

Vad gäller om rubriken redan använder SplitType?

SplitType är ett animeringsverktyg som omsluter rader, ord och tecken i element. Den officiella dokumentationen rekommenderar font-kerning: none på målelement för att förhindra små teckenförskjutningar när texten delas upp eller återställs. Rekommendationen gäller verktygets animeringsflöde; om du följer den kan avståndet ändras genom hela rubriken. SplitTypes dokumentation

Om en befintlig rubrik använder SplitType bör du jämföra med originaltexten innan du lägger till ytterligare en korrigering. Biblioteket dokumenterar instansmetoden instance.revert(), som återställer det ursprungliga innehållet. I en implementation som redan har en SplitType-instans använder du dess dokumenterade livscykel för att granska det ursprungliga tillståndet. Det lokala HTML-exemplet ovan är inte beroende av något bibliotek. SplitType: Återställ delad text

Kontrollera också hur texten beter sig när storleken ändras. SplitType anger att relativt positionerade ord- och teckenuppdelningar kan flöda om, medan raduppdelning eller absolut positionering kräver att texten delas upp på nytt när behållarens storlek ändras. Om den skenbara kollisionen bara uppstår efter en breddändring bör du undersöka layoutbeteendet innan du kodar in en permanent justering av bokstavsparet. SplitType: Responsiv text

För den här uppgiften med ett enda bokstavspar är den praktiska slutsatsen att undvika teckenuppdelning enbart för att få ett handtag för avståndsjustering. Det skapar fler layoutgränser än exemplet behöver.

När bör du låta textsegmentet vara intakt?

Använd exemplet med lokal marginal endast för en medvetet vald gräns mellan enkla latinska bokstäver. Gör inte om det till en rutin som omsluter varje position i en sträng. W3C varnar för att uppdelning av grafemkluster eller ligaturer med elementgränser kan ge inkonsekvent eller oönskad återgivning. En teckenposition i en sträng är inte automatiskt en lämplig plats att avbryta formningen. CSS Text Module Level 3: Tecken och bokstäver

När den exakta formningen måste bevaras låter du rubriken vara sammanhängande text, jämför dess inbyggda kerninginställningar och väljer en typsnittsrendering som ger ett tillfredsställande resultat för bokstavsparet. När ett kontrollerat lokalt undantag är godtagbart lägger du till en enda gräns, använder den minsta användbara marginalen och kontrollerar det resulterande ordet och radbrytningarna tillsammans.

Källor