Hoe je RTL-talen vertaalt in WordPress: Arabisch, Hebreeuws, Perzisch
Je hebt net je WordPress-thema in het Arabisch vertaald. Je uploadt het .mo-bestand, schakelt de sitetaal om en het resultaat is onleesbaar. Tekst loopt naar links over, knoppen overlappen elkaar en je zorgvuldig ontworpen lay-out ziet eruit alsof deze door een papierversnipperaar is gehaald.
Welkom in de wereld van Right-to-Left (RTL) talen -- waar vertaling slechts de helft van de strijd is.
Arabisch, Hebreeuws en Perzisch (Farsi) behoren tot de meest gesproken talen ter wereld. Arabisch alleen al heeft meer dan 400 miljoen moedertaalsprekers. Als je WordPress-site deze doelgroepen negeert, laat je serieus geld liggen. Maar om ze van dienst te zijn, is meer nodig dan Engelse woorden vervangen door Arabische. Het vereist een heroverweging van de gehele lay-outrichting.
Deze handleiding behandelt alles wat je moet weten: hoe RTL werkt in WordPress, hoe je je CSS kunt repareren, hoe je .po-bestanden met RTL-strings kunt verwerken en hoe je de meest voorkomende valkuilen kunt vermijden.
Hoe RTL Werkt in WordPress
WordPress heeft ingebouwde RTL-ondersteuning. Wanneer je je sitetaal instelt op Arabisch (ar), Hebreeuws (he) of Perzisch (fa), voegt WordPress automatisch dir="rtl" toe aan de <html>-tag en laadt een rtl.css-stylesheet als je thema er een biedt.
Dit is de theorie. In de praktijk worden de meeste thema's geleverd met minimale of gebroken RTL-ondersteuning.
Wat Er Daadwerkelijk Verandert
Wanneer de RTL-modus wordt geactiveerd, spiegelt de browser de gehele paginalay-out:
- Tekst loopt van rechts naar links.
- Zijbalken wisselen van kant.
- Navigatiemenu's keren de volgorde om.
- Padding- en margin-waarden worden omgedraaid (links wordt rechts).
- Pictogrammen met een directionele betekenis (pijlen, chevrons) moeten worden gespiegeld.
Als de CSS van je thema alleen voor LTR is geschreven, vecht elke margin-left, padding-right, float: left en text-align: left declaratie nu tegen de RTL-engine van de browser.
Je CSS Repareren voor RTL: Een Praktische Handleiding
De schoonste aanpak is het gebruik van CSS Logical Properties, die zich automatisch aanpassen aan de schrijfrichting van het document. In plaats van left en right gebruik je inline-start en inline-end.
Voor: Fysieke Eigenschappen (Werkt Niet in RTL)
/* LTR-only CSS -- breaks in Arabic */
.sidebar {
float: left;
margin-right: 20px;
}
.nav-arrow {
padding-left: 10px;
text-align: left;
}
.card {
border-left: 3px solid #0073aa;
}
Na: Logische Eigenschappen (Werkt in Beide Richtingen)
/* Direction-agnostic CSS -- works in both LTR and RTL */
.sidebar {
float: inline-start;
margin-inline-end: 20px;
}
.nav-arrow {
padding-inline-start: 10px;
text-align: start;
}
.card {
border-inline-start: 3px solid #0073aa;
}
Met logische eigenschappen schrijf je je CSS één keer en het werkt correct in zowel het Engels als het Arabisch zonder enige overrides.
De [dir="rtl"] Override Methode
Als je je volledige stylesheet niet kunt herstructureren, kun je specifiek RTL targeten met behulp van attribuutselectors:
[dir="rtl"] .sidebar {
float: right;
margin-left: 20px;
margin-right: 0;
}
[dir="rtl"] .nav-arrow {
padding-left: 0;
padding-right: 10px;
text-align: right;
}
Dit werkt, maar het verdubbelt je onderhoudslast. Elke keer dat je je LTR-stijlen bijwerkt, moet je ook de RTL-overrides bijwerken.
PO-Bestanden Vertalen met RTL-Strings
De vertaling zelf introduceert uitdagingen die verder gaan dan de lay-out. RTL-talen hebben unieke kenmerken die de meeste geautomatiseerde tools in de war brengen.
Bidirectionele Tekst (Bidi) in PO-Bestanden
De echte complexiteit verschijnt wanneer RTL- en LTR-tekst in een enkele string worden gemengd. Beschouw dit veelvoorkomende WordPress-patroon:
msgid "Powered by %s"
msgstr "مدعوم بواسطة %s"
De %s placeholder wordt vervangen door een Engelse productnaam zoals "WooCommerce." In de gerenderde output moet de browser Arabische tekst van rechts naar links weergeven, vervolgens overschakelen naar links naar rechts voor het Engelse woord, en vervolgens mogelijk terugschakelen.
Dit wordt bidirectionele tekst (of "bidi") genoemd en wordt afgehandeld door het Unicode Bidirectional Algorithm. Meestal werkt het automatisch. Maar wanneer je meerdere placeholders of getallen naast RTL-tekst hebt, kan de visuele volgorde onvoorspelbaar worden.
Veelvoorkomende Vertaalfouten
Generieke vertaaltools maken verschillende RTL-specifieke fouten:
-
Omgekeerde placeholder volgorde. Een string als
%1$s out of %2$skan de placeholders omgedraaid krijgen omdat de AI ze herschikt om overeen te komen met de Arabische grammatica. Dit produceert onjuiste uitvoer zoals "10 out of Page" in plaats van "Page out of 10." Lees meer over het beschermen van codevariabelen tijdens de vertaling. -
Gebroken HTML-richting. Als je string inline HTML bevat zoals
<span dir="ltr">, kan een naïeve vertaler hetdir-attribuut verwijderen of vertalen. -
Ontbrekende meervoudsvormen. Arabisch heeft zes meervoudsvormen -- nul, één, twee, weinig, veel en andere. Dit is het meest complexe meervoudssysteem van alle talen die WordPress ondersteunt. Een tool die slechts twee vormen genereert (zoals Engels enkelvoud/meervoud) laat je Arabische
.po-bestand gebroken achter. Voor een diepe duik in hoe Gettext-meervoudsvormen werken, zie onze gids over complexe meervoudsvormen in WordPress.
Hier is hoe een correct vertaalde Arabische meervoudsstring eruit ziet in een .po-bestand:
# Arabic: nplurals=6
msgid "%d comment"
msgid_plural "%d comments"
msgstr[0] "لا تعليقات"
msgstr[1] "تعليق واحد"
msgstr[2] "تعليقان"
msgstr[3] "%d تعليقات"
msgstr[4] "%d تعليقًا"
msgstr[5] "%d تعليق"
Als een van die zes vormen leeg of onjuist is, zal WordPress terugvallen op de Engelse string voor dat specifieke aantal. Je gebruikers zullen "5 comments" in het Engels zien verspreid over een verder volledig Arabische interface.
Het Testen van Je RTL-Implementatie
Het vertalen en repareren van CSS is niet genoeg. Je moet het resultaat in een echte browser verifiëren.
Een Snelle Test Checklist
- Schakel de WordPress-taal om naar Arabisch in Instellingen > Algemeen. Voeg niet zomaar
dir="rtl"handmatig toe -- gebruik de echte taalinstelling zodat WordPress zijn eigen RTL-overrides laadt. - Controleer navigatiemenu's. Zijn ze gespiegeld? Openen dropdowns in de juiste richting?
- Inspecteer formuliervelden. Invoertekst moet van rechts naar links lopen. Placeholder-tekst moet rechts uitgelijnd zijn.
- Verifieer inhoud met gemengde richting. Strings die zowel Arabisch als Engels bevatten (zoals merknamen of URL's) moeten in de juiste visuele volgorde worden weergegeven.
- Test op mobiel. RTL-lay-out bugs zijn vaak ernstiger op kleinere schermen waar er minder ruimte is voor uitlijningsfouten.
Als je vertalingen helemaal niet worden weergegeven, is het probleem mogelijk niet gerelateerd aan RTL -- controleer eerst je .mo-bestandcompilatie en bestandspaden.
Browser Developer Tools Truc
In Chrome DevTools kun je tijdelijk RTL forceren op elke pagina zonder de WordPress-instellingen te wijzigen:
/* Paste in DevTools console as: document.documentElement.dir = 'rtl' */
html {
direction: rtl;
}
Dit geeft je een snel voorbeeld van hoe je thema RTL afhandelt voordat je zelfs maar begint met vertalen.
Het Automatiseren van RTL-Vertaling op de Juiste Manier
Handmatige vertaling van RTL-talen is duur en traag. Professionele Arabische vertalers rekenen hoge tarieven en het vinden van iemand die zowel de taal als de WordPress-specifieke Gettext-syntax begrijpt, is moeilijk.
SimplePoTranslate lost dit op met een Context-Aware AI engine die RTL-specifieke uitdagingen native begrijpt:
- Alle zes Arabische meervoudsvormen worden automatisch gegenereerd. Onze engine leest de
Plural-Formsheader in je.po-bestand en produceert precies het aantal vormen dat je doeltaal vereist. Geen legemsgstr-slots, geen Engelse fallbacks. - Placeholder-veiligheid. Variabelen zoals
%s,%den%1$sworden vergrendeld tijdens de vertaling. De AI kan ze niet herschikken, verwijderen of beschadigen -- zelfs niet wanneer de Arabische grammatica een andere woordvolgorde suggereert. Lees meer over hoe syntax-vergrendeling je code beschermt. - Bidirectionele context. De AI begrijpt dat strings met gemengde richting een speciale behandeling nodig hebben en behoudt HTML-richtingattributen.
Of je nu een blogthema lokaliseert voor een Hebreeuws publiek of een volledige WooCommerce-winkel in het Perzisch vertaalt, het proces is hetzelfde: upload je .po-bestand, selecteer je doeltaal en download het vertaalde bestand. De hele workflow duurt minuten, geen dagen.
Voor een complete walkthrough van het WordPress-lokalisatieproces, zie onze ultieme gids voor WordPress-lokalisatie.
Stop met het Behandelen van RTL als een Bijzaak
Right-to-left talen vertegenwoordigen meer dan een miljard potentiële gebruikers. Arabisch is de vijfde meest gesproken taal ter wereld. Hebreeuws en Perzisch bedienen cruciale markten in het Midden-Oosten en Centraal-Azië.
Als je WordPress-site deze gebruikers niet kan bedienen met een gepolijste, native-aanvoelende ervaring, zullen ze een concurrent vinden die dat wel kan.
Het goede nieuws: WordPress heeft de infrastructuur al. Je thema heeft alleen de juiste CSS nodig, en je .po-bestanden hebben een vertaaltool nodig die de complexiteit van RTL-talen respecteert.
Klaar om je WordPress-site te vertalen in het Arabisch, Hebreeuws of Perzisch? Begin gratis op SimplePoTranslate.com