Saknat mellanrum vid bidi-text

En sannolik orsak

Det kan se ut som att mellanslag mellan latinsk text och arabisk/hebreisk text försvinner, om text omedelbart följs av mellanslag inom ett inline-element som anger ett värde för attributet dir.

I följande kod-mönster indikerar den färgade rektangeln ett problematiskt mellanslag. (Text med stora tecken representerar HTV, och text med små tecken VTH.)

Sådan typ av kodning kan ge upphov till följande effekt, om vi lägger in arabisk och engelsk text som innehåll.

Lägg märke till att denna effekt också uppstår när höger-till-vänster-text bäddas in i en vänster-till-höger-text.

Hur reparera detta

Om den föregående sektionen beskriver hur din kod ser ut, så är lösningen att ta bort alla mellanslag före avslutningstaggen av inline-elementet, eller att ta bort attributet dir (om så är lämpligt).

Här är det nya mönstret:

Man kan till exempel få det förväntade resultatet (för exemplet ovan) genom att flytta ut mellanslaget efter W3C till att placeras efter span.

För detta fall behöver man faktiskt inte använda elementet span runt texten W3C för att den önskvärda effekten skall uppstå. Att ta bort attributet, eller hela span-elementet löser också problemet (men vi rekommenderar i alla fall att man märker upp all text som har olika skrivriktning).

Varför sker detta?

Läs detta avsnitt endast om du vill förstå de tekniska detaljerna om varför detta händer.

HTML-specifikationen beskriver inte i detalj det förväntade beteendet vid presentation av text, men det är beskrivet i CSS-specifikationer. Fastän exemplen på denna sida inte använder CSS, så gäller ändå samma principer. Det som nu följer är återgivet från CSS Text Module Level 3 Working Draft:

Vita tecken som omedelbart följer efter något annat sammanslagningsbart vitt tecken — inklusive sådana som förekommer utanför det inline-element som innehåller det vita tecknet, givet att de båda förekommer inom samma radorienterade formateringssammanhang — slås samman till att ge upphov till blank med längd noll. (Det är osynligt, men bibehåller möjligheter till mjuk radbrytning.)

Antag att vi har ett exempel enligt följande, där färger representerar mellanslag (U+0020):

<ltr>a <rtl> B </rtl> c</ltr>

I detta fall anger specifikationen att mellanslaget efter A skall bibehållas, att mellanslaget före B skall tas bort, att mellanslaget efter B skall behållas, att mellanslaget före C skall tas bort, vilket ger upphov till slutresultatet:

<ltr>a <rtl>B </rtl>c</ltr>

Detta presenteras sedan enligt Unicode:s algoritm för bidirektionell text, vilket blir:

a  Bc

Observera att det faktiskt finns två mellanslag mellan A och B. Inbäddningsnivåerna kan beskrivas på följande sätt:

00110

Vad händer i min webbläsare?

Följande rutor visar kodexempel följda av en implementation av koden på denna sida, så att du kan prova hur din webbläsare beter sig. Det omgivande sammanhanget är, i alla exempel, höger-till-vänster. Den vertikala brandgula stapeln anger var mellanslag finns.