För nästlad HTML-text väljer du isolering när varje fras ska behålla sin egen riktning utan att påverka intilliggande text. Använd endast inbäddning när det är avsiktligt att frasen ska påverka omgivande text, och en åsidosättning när utformningen uttryckligen kräver en tvingad teckenordning.

Den här guiden hjälper den som redigerar en HTML-sida på en Mac att välja rätt mekanism, bevara nästlade etiketter och skiljetecken samt kontrollera resultatet i en webbläsare på datorn. Exemplen använder påhittade etiketter, siffror och geometriska tecken.

Vilken mekanism passar layoutuppgiften?

Börja med två frågor: ska webbläsaren använda vanlig dubbelriktad ordning inom frasen, och ska frasen påverka ordningen i den omgivande texten? Svaren ger följande praktiska jämförelse. MDN:s referens för unicode-bidi beskriver de underliggande CSS-beteendena.

Krav Mekanism Rekommenderat HTML-tillvägagångssätt
Ge en fras med känd riktning en egen gräns Isolering Ett befintligt inline-element med dir="ltr" eller dir="rtl"
Isolera en fras vars riktning är okänd Isolering med automatisk riktning bdi, eller ett befintligt inline-element med dir="auto"
Skapa ett riktningsomfång som fortfarande påverkar ordningen i omgivande text Inbäddning Ett specialiserat CSS-fall med unicode-bidi: embed
Tvinga teckenordningen och samtidigt isolera resultatet Isolerad åsidosättning bdo med uttryckligt dir="ltr" eller dir="rtl"
Tvinga teckenordningen och samtidigt behålla påverkan på omgivande text Icke-isolerad åsidosättning Ett specialiserat CSS-fall med unicode-bidi: bidi-override

Vid vanlig HTML-redigering använder du riktningsmarkeringar som utgångspunkt. W3C rekommenderar att varje fras med motsatt riktning omsluts tätt och att nästlade fraser uttrycks med nästlad markup. Då blir de avsedda gränserna synliga i dokumentet. W3C: Inline-markup och dubbelriktad text i HTML.

Hur märker du upp nästlad isolerad text?

Ge varje fullständig fras sin egen riktningsgräns. Om ett befintligt inline-element redan innehåller exakt den frasen lägger du till dir där. Annars lägger du till ett span. Behåll skiljetecken som hör till frasen inuti omslutningen och skiljetecken från den omgivande meningen utanför. W3C kallar detta att ”omsluta frasen tätt”. W3C:s vägledning om inline-markup.

För en syntetisk formetikett som ska löpa från höger till vänster och innehåller en vänster-till-höger-identifierare kan strukturen se ut så här i ett illustrativt kodfragment:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Det finns tre avsiktliga omfång: den yttre meningen, formsekvensen och den nästlade identifieraren. Antalet hör till meningen, så det stannar utanför formsekvensen. Om bara den yttre frasen markeras får den inre identifieraren ingen egen uttrycklig gräns. Den här nästlingen följer W3C:s rekommenderade struktur för riktningsändringar. W3C:s vägledning om nästlade fraser.

När den infogade etikettens riktning är okänd ger bdi isolering och använder automatisk riktningsidentifiering som standard. Ett vanligt span utan dir har inte samma standardbeteende. WHATWG anger att bdi som standard använder auto i stället för att ärva riktningen på vanligt sätt. HTML-standarden: Elementet bdi.

Automatisk riktning är en heuristik som utgår från det första tecknet med stark riktning, med angivna undantag för nästlade riktningsbestämda element. Den tolkar inte etikettens avsedda betydelse. En etikett som börjar med A1 ger därför en vänster-till-höger-indikation även om det senare innehållet antyder en annan presentation. Ange en uttrycklig riktning när du redan känner till kravet. MDN: Det globala attributet dir.

En etikett som bara består av former och siffror kräver särskild omsorg: den saknar bokstäver med stark riktning. I de vanliga inline-exemplen här faller HTML-algoritmen tillbaka på vänster till höger när automatisk riktning inte hittar något kvalificerande tecken. Ange dir="rtl" om den syntetiska sekvensen ska ha höger-till-vänster som grundriktning. HTML-standarden: Attributet dir.

När passar inbäddning och åsidosättningar?

Inbäddning skapar ytterligare en riktningsnivå men behåller den vanliga teckenordningen inuti den. Gränsen påverkar också riktningen i den omgivande texten. Isolering ger innehållet ett eget omfång och gör samtidigt att sekvensen förhåller sig neutralt till omgivningen. W3C:s specifikation skiljer uttryckligen mellan dessa interna och externa effekter. CSS Writing Modes Level 3: Inbäddningar och åsidosättningar.

Välj inbäddning endast när den yttre riktningspåverkan ingår i det avsedda resultatet. För en fristående nästlad etikett följd av ett separat antal är isolering vanligtvis rätt val. Att nästlingen går djupare är i sig ingen anledning att välja embed: isolerade span-element kan själva innehålla ytterligare riktningsbestämda span-element.

En åsidosättning ändrar den interna regeln. Den tvingar den omedelbara texten till en sekvens i angiven riktning i stället för att låta den vanliga algoritmen bestämma ordningen för riktningsavsnitten. isolate-override lägger till en isoleringsgräns runt den tvingade ordningen. Det här är olika beteenden, inte starkare inställningar för att korrigera en vanlig fras. MDN: Värden för unicode-bidi.

För en avsiktlig demonstration av teckenordning använder du bdo med dir="ltr" eller dir="rtl". HTML-standarden kräver en uttrycklig riktning och förbjuder auto på det här elementet. Renderingsreglerna använder unicode-bidi: isolate-override, så det aktuella HTML-beteendet för bdo omfattar isolering. HTML-standarden: Elementet bdo, HTML-standarden: Rendering av dubbelriktad text.

Den här skillnaden spelar roll för latinska etiketter: en höger-till-vänster-grundriktning betyder inte att ”vända på varje latinskt tecken”. En åsidosättning kan tvinga fram den ordningen. Även då behåller de enskilda glyferna sin orientering; bdo ritar inte bokstavsformer baklänges. MDN: Elementet bdo.

Prova en fullständig jämförelsesida på din Mac

Följande fristående sida kräver bara en webbläsare och en textredigerare i oformaterat läge. De två första raderna jämför vanlig riktningshantering med tvingad ordning. De återstående raderna visar valen för nästling och gränser. Raden med CSS-inbäddning finns med som en demonstration av mekanismen; använd raden med HTML-isolering som utgångspunkt för en vanlig fristående etikett.

I TextEdit väljer du Arkiv > Nytt och sedan Format > Gör till oformaterad text. Klistra in hela koden nedan. Välj Arkiv > Spara, namnge filen bidi-demo.html och välj Använd .html om du får frågan. Det här är Apples dokumenterade steg för att skapa en HTML-fil. Öppna den sparade filen i webbläsaren på datorn. Apple: Arbeta med HTML-dokument i TextEdit på Mac.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Granska de två första raderna innan du ändrar något. Den vanliga riktningsbestämda span-texten ska behålla ABC i vänster-till-höger-bokstavsordning. Åsidosättningen ska visa CBA när du läser från vänsterkanten. Det här är en förväntning som följer av de dokumenterade mekanismerna, inte en rapporterad webbläsarmätning. MDN: Beteendet hos bdo.

Jämför sedan raderna med nästlad isolering och inbäddning. Behåll orden och antalet oförändrade medan du granskar formsekvensen och skiljetecknet vid dess gräns. Mekanismen skiljer sig åt även om ett visst exempel ser likadant ut: isolering och inbäddning garanterar inte synligt olika resultat för varje sträng. Den dokumenterade skillnaden handlar om hur omfånget deltar i den omgivande dubbelriktade upplösningen. W3C: CSS Writing Modes Level 3.

Gör ett användbart gränstest genom att flytta kolon in i det yttre riktningsbestämda span-elementet, spara och läsa in sidan igen. Flytta sedan tillbaka det utanför. Du ändrar vilken fras som äger skiljetecknet, så bedöm resultatet utifrån den avsedda tillhörigheten. Gör till sist webbläsarfönstret smalare och kontrollera samma gränser när meningen radbryts.

Bakgrunden och den prickade konturen markerar det testade span-elementet. De är hjälpmedel vid granskning. De anger inte riktning eller isolering.

Hur felsöker du ett resultat som fortfarande ser fel ut?

Arbeta från den minsta påverkade frasen och utåt. Om du ändrar flera riktningsinställningar samtidigt blir det svårt att avgöra vilken gräns som orsakade resultatet.

  1. Kontrollera omslutningen. Innehåller den hela etiketten och bara den? Skiljetecken och antal från meningen bör ligga utanför, om de inte hör till etiketten.
  2. Kontrollera nästlade fraser. En identifierare med egen riktning inuti en annan fras kan behöva en egen dir-omslutning.
  3. Kontrollera automatisk riktning. Om den avsedda grundriktningen är känd ersätter du auto med den uttryckliga riktningen. Det är särskilt användbart för syntetiska former och siffror.
  4. Kontrollera åsidosättningar. Om teckenordningen oväntat tvingas fram granskar du deklarationer för bdo och CSS unicode-bidi.
  5. Kontrollera CSS-kaskaden. En författarregel kan ersätta webbläsarens riktningsformatering. Ta bort experimentella bidi-regler och testa HTML-markeringen igen.

De två första kontrollerna följer W3C:s vägledning om omslutning och nästling. Kontrollen av automatisk riktning följer MDN:s dokumentation om dir; de sista kontrollerna följer HTML:s renderingsregler.

Skilj också mellan ordning och justering. text-align: right placerar inline-innehåll mot högerkanten av ett block; det skapar inte en isolerad fras. text-align: start följer blockets riktning, så en ändring av grundriktningen kan även ändra vilken kant som används. Felsök teckenordningsproblemet separat från radens placering. MDN: text-align.

När det gäller kompatibilitet dokumenterar WHATWG att bdi och bdo stöds i alla aktuella webbläsarmotorer. Det fastställer inte stöd i alla äldre webbläsare eller inbäddade visningsprogram. När du kontrollerar en annan renderingsmiljö testar du den faktiska målmiljön och behåller riktningsbestämd HTML-markup: MDN rekommenderar den framför isolering som bara bygger på CSS, eftersom formatering kan ignoreras. HTML-standarden: Semantik på textnivå, MDN: Användningsanteckningar för bdi.

Avsluta med ett uttryckligt beslut för varje nästlad fras: dess grundriktning, dess gräns och om den interna teckenordningen ska förbli vanlig. För en fristående etikett börjar du med isolering. Behåll inbäddning eller åsidosättning endast när layouten kräver det specifika dokumenterade beteendet.

Källor