Använd HTML dir för att ange den grundläggande textriktningen och CSS flex-direction: row-reverse för att vända flödet i en flexrad. När du ordnar kort på en offentlig sida från din Mac bör du först avgöra om du behöver ändra textriktning, objektordning eller justering.

Den här guiden utgår från att du redigerar en sidas HTML och CSS i en textredigerare och förhandsgranskar den i en webbläsare på datorn. Uppgiften är att ordna tre neutrala rutor—Alpha, Beta och Gamma—samtidigt som textens beteende och dokumentordningen förblir avsiktliga.

Vad ändrar de olika riktningsinställningarna egentligen?

HTML-attributet dir beskriver den grundläggande riktningen för ett elements text. Dess uttryckliga värden är ltr och rtl; auto ber webbläsaren avgöra riktningen utifrån innehållet. WHATWG uppmuntrar författare att ange textriktning via HTML så att informationen förblir tillgänglig utan CSS. HTML-standarden: attributet dir.

CSS direction styr också den grundläggande textriktningen och påverkar layoutbeteendet. Egenskapen ärvs, så om du anger direction: rtl för en behållare kan det påverka dess underordnade element. MDN rekommenderar att använda HTML dir där det är möjligt. Se en åsidosättning av riktningen i CSS som ett medvetet beslut om textriktning, snarare än ett praktiskt sätt att flytta rutor. MDN: direction.

CSS flex-direction styr flexbehållarens huvudaxel. En row följer den löpande axeln i det aktuella skrivläget; row-reverse byter plats på riktningarna för huvudstart och huvuds slut. Egenskapen ändrar riktningen som objekten läggs ut i, samtidigt som deras källordning bevaras. W3C: flödesriktning för flex.

De här mekanismerna samverkar. Vid horisontell skrift börjar en flexrad med ltr till vänster, medan en flexrad med rtl börjar till höger. Om du lägger till row-reverse vänds båda startriktningarna. Därför betyder row-reverse inte alltid att det första objektet visas till höger. MDN: flex-direction.

Vilken inställning passar det resultat du vill ha?

Innan du redigerar bör du beskriva det önskade resultatet konkret: ”Behåll de engelska etiketterna oförändrade, visa rutorna i omvänd visuell ordning och håll gruppen till höger.” Den beskrivningen pekar ut separata beslut om text, objektflöde och justering.

Önskat resultat Lämplig utgångspunkt Vad du bör kontrollera
Ange innehållets grundläggande textriktning HTML dir="ltr" eller dir="rtl" Använd det på det område vars text kräver den riktningen.
Vänd alla objekts visuella flöde i en flexrad flex-direction: row-reverse Kontrollera först behållarens befintliga riktning.
Flytta en oförändrad rad mot dess huvudslut justify-content: flex-end Se till att det finns ledigt utrymme för justering.
Ändra den meningsbärande ordningen överallt Ordna om källelementen Bekräfta att den resulterande läsordningen fungerar.
Flytta utvalda objekt visuellt Individuella värden för order Granska skillnaden mellan visuell ordning och källordning.

Skillnaden mellan att vända ordningen och att justera den spelar roll. Med en rad med ltr kan justify-content: flex-end placera Alpha, Beta och Gamma tillsammans till höger utan att vända deras ordning. Justering fördelar tillgängligt utrymme längs huvudaxeln; flex-end syftar på flexbehållarens sida för huvudslut. Effekten kan försvinna när flexibla objekt förbrukar det utrymmet. MDN: justify-content.

Om läsarna måste möta objekten i en viss ordning ska du ange den ordningen i själva dokumentet. W3C varnar uttryckligen för att använda omvänd flexordning eller order för att kompensera för felaktig källordning. W3C: ordning och orientering.

Förutse de fyra kombinationerna innan du ändrar sidan

Jämförelsen nedan bygger på de dokumenterade axelreglerna. Den förutsätter writing-mode: horizontal-tb, en flexrad, lika värden för order och källordningen Alpha, Beta, Gamma. ”Visas från vänster till höger” beskriver rutornas fysiska placering över skärmen.

Behållarens riktning Flexriktning Första rutan börjar vid Visas från vänster till höger
ltr row Vänster Alpha, Beta, Gamma
ltr row-reverse Höger Gamma, Beta, Alpha
rtl row Höger Gamma, Beta, Alpha
rtl row-reverse Vänster Alpha, Beta, Gamma

Den andra och tredje raden kan se likadana ut när innehållet består av enkla rektanglar. Inställningarna för textriktning skiljer sig dock åt. Den fjärde kombinationen förklarar en vanlig överraskning: om du använder både rtl och row-reverse blir objektflödet från vänster till höger. MDN beskriver detta riktningsberoende beteende. MDN: flex-direction.

Den grundläggande textriktningen påverkar också interpunktion och ordningen hos riktade textsekvenser. Att ange rtl vänder inte helt enkelt på varje tecken i ett engelskt ord. En etikett kan fortfarande vara läsbar samtidigt som dess interpunktion hamnar på en oväntad plats. Därför passar enkla rutor för att undersöka rutornas placering, men de räcker inte för att bedöma textens beteende. MDN: användningsinformation om dir.

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

Spara följande fullständiga dokument som direction-demo.html i en vanlig textredigerare och öppna sedan filen i webbläsaren. Det använder syntetiska etiketter och CSS-rektanglar, utan externa beroenden. De förväntade resultaten följer av de dokumenterade reglerna; exemplet framställs inte som ett resultat som testats i en webbläsare.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Jämför de fyra raderna med förutsägelsetabellen. Alla fyra har samma källordning. Det är bara behållarens riktning och klassen för omvänd ordning som skiljer sig åt. Det uttryckliga horisontella skrivläget håller demonstrationen fokuserad på det vanliga horisontella fallet på en datorskärm.

Ändra sedan endast justify-content: flex-start till justify-content: flex-end, spara och läs in sidan på nytt. Grupperna bör flyttas till motsatta kanter längs huvudaxeln, samtidigt som varje rads objektflöde bevaras. På så sätt skiljer du placering från omvänd ordning utan att lägga till ytterligare en inställning för textriktning. MDN: justify-content.

Återställ slutligen justeringsinställningen och lägg till en punkt efter Alpha i varje rad. Jämför interpunktionen och rutornas placering. Det här är ett exempel på hur du kan undersöka textriktning, inte en rekommendation om att ge vanliga engelska etiketter värdet rtl. MDN:s förklaring av grundläggande riktning beskriver varför interpunktion vid textgränser bör kontrolleras separat. MDN: dir.

Felsök oväntade resultat i den faktiska layouten

Kontrollera att den överordnade behållaren är en flexbehållare

Kontrollera elementet som innehåller rutorna. flex-direction gäller när dess display är flex eller inline-flex. En deklaration på en vanlig blockbehållare skapar inte en flexlayout. Kontrollera också om en senare regel ändrar det effektiva värdet vid webbläsarens aktuella bredd. MDN: beskrivning av flex-direction.

Kontrollera den ärvda riktningen innan du lägger till ytterligare en omvändning

Granska behållaren och dess föräldraelement efter dir, och kontrollera sedan om det finns deklarationer för CSS direction. Om dir utelämnas ärvs riktningen i allmänhet från det överordnade elementet; utelämnandet begär inte automatisk identifiering. Om källordningen oväntat börjar till höger kan den ärvda riktningen förklara det. MDN: arv för dir.

Undvik att använda dir="auto" som en layoutomkopplare. WHATWG definierar det genom riktningsidentifiering baserad på innehållet, främst utifrån det första starkt riktningsbärande tecknet, och rekommenderar att det reserveras för text vars riktning faktiskt är okänd. Ett layoutkrav bör inte bero på vilken etikett som råkar stå först. HTML-standarden: attributet dir.

Skilj mellan omvänd objektordning och omvänd radordning

Om problemet bara uppstår när du gör fönstret smalare bör du kontrollera radbrytningen. row-reverse ändrar flödet längs huvudaxeln; wrap-reverse ändrar riktningen som flexraderna staplas i. Standardvärdet nowrap behåller en enda rad och kan medföra att innehållet flödar över. Det här är separata inställningar, så testa både ett smalt fönster och den ursprungliga bredden på datorskärmen. MDN: flex-wrap.

Leta efter individuella ordningsregler

Kontrollera om någon ruta har ett värde för order. Flexlayout grupperar objekt efter detta heltal, från lägst till högst, och bevarar källordningen inom grupper med samma värde. Omvänd ordning ändrar sedan riktningen som den resulterande sekvensen läggs ut i. Återställ oväntad ordning på objektnivå innan du drar slutsatsen att behållarens riktning är fel. MDN: ordna flexobjekt.

Kontrollera läsordningen innan du behåller ändringen

För neutrala dekorativa rutor kan visuell omvänd ordning vara hela kravet. För länkar eller kontroller bör du granska ordningen i källkoden och följa tangentbordsfokus genom komponenten. Flexomvändning i sig ändrar inte den sekventiella navigeringen eller talordningen. En visuellt omvänd grupp kan därför behålla sin ursprungliga interaktionsordning. W3C: flödesriktning för flex.

Använd den kontrollen för att avgöra om källkoden ska ändras. Om Gamma, Beta, Alpha är den avsedda meningsbärande ordningen ska du placera elementen i den ordningen. Om Alpha, Beta, Gamma fortfarande är den korrekta läsordningen och bara presentationen behöver vändas, ska du utvärdera den visuella ordningen med den skillnaden i åtanke. MDN visar hur källordningen fungerar med länkar som kan få fokus. MDN: ordna flexobjekt.

Välj mekanism efter kravet: HTML dir för grundläggande textriktning, flex-direction för flöde längs flexaxeln och justering för att placera en oförändrad sekvens. Innan du behåller resultatet bör du jämföra rutornas placering, interpunktion, radbrytning och källordning separat. Då får du ett repeterbart sätt att lösa en layout som bara ser omvänd ut.

Källor