RTL nyelvek fordítása WordPressben: arab, héber, perzsa
Épp most fejezted be a WordPress témád arabra fordítását. Feltöltöd a .mo fájlt, átváltod az oldal nyelvét, és az eredmény olvashatatlan. A szöveg kilóg balra, a gombok átfedik egymást, és az általad gondosan megtervezett elrendezés úgy néz ki, mintha egy papírzúzón ment volna keresztül.
Üdv a jobbról balra íródó (RTL) nyelvek világában – ahol a fordítás csak a csata fele.
Az arab, héber és perzsa (fárszi) a világ legelterjedtebb nyelvei közé tartozik. Csak az arabnak több mint 400 millió anyanyelvi beszélője van. Ha a WordPress webhelyed figyelmen kívül hagyja ezeket a közönségeket, komoly pénzt hagysz az asztalon. De a kiszolgálásukhoz többre van szükség, mint az angol szavak arabra cserélésére. A teljes elrendezés irányának átgondolását igényli.
Ez az útmutató mindent lefed, amit tudnod kell: hogyan működik az RTL a WordPressben, hogyan javítsd ki a CSS-t, hogyan kezeld a .po fájlokat RTL karakterláncokkal, és hogyan kerüld el a leggyakoribb buktatókat.
Hogyan működik az RTL a WordPressben
A WordPress beépített RTL támogatással rendelkezik. Amikor az oldal nyelvét arabra (ar), héberre (he) vagy perzsára (fa) állítod, a WordPress automatikusan hozzáadja a dir="rtl" attribútumot a <html> taghez, és betölt egy rtl.css stíluslapot, ha a témád biztosít ilyet.
Ez az elmélet. A gyakorlatban a legtöbb téma minimális vagy hibás RTL támogatással rendelkezik.
Mi változik valójában
Amikor az RTL mód aktiválódik, a böngésző tükrözi a teljes oldalelrendezést:
- A szöveg jobbról balra folyik.
- Az oldalsávok oldalt cserélnek.
- A navigációs menük megfordítják a sorrendet.
- A padding és margin értékek megfordulnak (a balból jobb lesz).
- Az irányított jelentéssel bíró ikonokat (nyilak, chevronok) tükrözni kell.
Ha a témád CSS-e csak LTR-re lett írva, akkor minden margin-left, padding-right, float: left és text-align: left deklaráció most a böngésző RTL motorja ellen harcol.
A CSS javítása RTL-hez: gyakorlati útmutató
A legtisztább megközelítés a CSS logikai tulajdonságok használata, amelyek automatikusan alkalmazkodnak a dokumentum írási irányához. A left és right helyett az inline-start és inline-end tulajdonságokat használod.
Előtte: Fizikai tulajdonságok (RTL-ben hibás)
/* 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;
}
Utána: Logikai tulajdonságok (mindkét irányban működik)
/* 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;
}
Logikai tulajdonságokkal egyszer írod meg a CSS-t, és az helyesen működik angolul és arabul is, felülírások nélkül.
A [dir="rtl"] felülírási módszer
Ha nem tudod teljesen átalakítani a stíluslapodat, akkor a [dir="rtl"] attribútumválasztóval konkrétan az RTL-t célozhatod meg:
[dir="rtl"] .sidebar {
float: right;
margin-left: 20px;
margin-right: 0;
}
[dir="rtl"] .nav-arrow {
padding-left: 0;
padding-right: 10px;
text-align: right;
}
Ez működik, de megduplázza a karbantartási terheket. Minden alkalommal, amikor frissíted az LTR stílusokat, frissítened kell az RTL felülírásokat is.
PO fájlok fordítása RTL karakterláncokkal
A fordítás önmagában is olyan kihívásokat vet fel, amelyek túlmutatnak az elrendezésen. Az RTL nyelveknek egyedi jellemzőik vannak, amelyek megtréfálják a legtöbb automatizált eszközt.
Kétirányú szöveg (Bidi) a PO fájlokban
A valódi komplexitás akkor jelenik meg, amikor az RTL és az LTR szöveg egyetlen karakterláncban keveredik. Tekintsük ezt a gyakori WordPress mintát:
msgid "Powered by %s"
msgstr "مدعوم بواسطة %s"
A %s helyőrző egy angol terméknévvel, például „WooCommerce” névvel lesz helyettesítve. A renderelt kimenetben a böngészőnek arab szöveget kell megjelenítenie jobbról balra, majd balról jobbra kell váltania az angol szóhoz, majd potenciálisan vissza kell váltania.
Ezt kétirányú szövegnek (vagy "bidi") nevezik, és az Unicode Bidirectional Algorithm kezeli. A legtöbb esetben automatikusan működik. De ha több helyőrző vagy szám van az RTL szöveg mellett, a vizuális sorrend kiszámíthatatlanná válhat.
Gyakori fordítási hibák
Az általános fordítóeszközök számos RTL-specifikus hibát vétenek:
-
Fordított helyőrző sorrend. Egy olyan karakterlánc, mint a
%1$s out of %2$s, helyőrzői felcserélődhetnek, mert a mesterséges intelligencia átrendezi őket, hogy megfeleljenek az arab nyelvtanának. Ez helytelen kimenetet eredményez, például "10 out of Page" helyett "Page out of 10.". Tudj meg többet a kódváltozók védelméről a fordítás során. -
Hibás HTML irányultság. Ha a karakterláncod beágyazott HTML-t tartalmaz, például
<span dir="ltr">, egy naiv fordító eltávolíthatja adirattribútumot vagy lefordíthatja azt. -
Hiányzó többes számú alakok. Az arabnak hat többes számú alakja van – nulla, egy, kettő, kevés, sok és egyéb. Ez a WordPress által támogatott nyelvek közül a legösszetettebb többes számú rendszer. Egy olyan eszköz, amely csak két alakot generál (mint az angol egyes/többes szám), tönkreteszi az arab
.pofájlodat. A Gettext többes számú alakjainak működéséről részletesen a komplex többes számok a WordPressben című útmutatónkban olvashatsz.
Így néz ki egy helyesen lefordított arab többes számú karakterlánc egy .po fájlban:
# 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 تعليق"
Ha e hat alak közül bármelyik üres vagy helytelen, a WordPress az adott számhoz az angol karakterláncra fog visszaváltani. A felhasználóid angolul fogják látni az „5 comments” szöveget egy egyébként teljesen arab felületen.
Az RTL implementáció tesztelése
A fordítás és a CSS javítása nem elég. Valós böngészőben kell ellenőrizned az eredményt.
Gyors tesztelési ellenőrzőlista
- Válts WordPress nyelvet arabra a Beállítások > Általános menüpontban. Ne csak manuálisan add hozzá a
dir="rtl"attribútumot – használd a valódi nyelvi beállítást, hogy a WordPress betöltse a saját RTL felülírásait. - Ellenőrizd a navigációs menüket. Tükröződnek? A legördülő menük a megfelelő irányba nyílnak?
- Vizsgáld meg az űrlapmezőket. A beviteli szövegnek jobbról balra kell folynia. A helyőrző szövegnek jobbra igazítottnak kell lennie.
- Ellenőrizd a vegyes irányú tartalmat. Azok a karakterláncok, amelyek arab és angol nyelvet is tartalmaznak (például márkanevek vagy URL-ek), a helyes vizuális sorrendben kell, hogy megjelenjenek.
- Teszteld mobilon. Az RTL elrendezési hibák gyakran súlyosabbak kisebb képernyőkön, ahol kevesebb hely van az igazítási hibákra.
Ha a fordításaid egyáltalán nem jelennek meg, akkor a probléma nem feltétlenül kapcsolódik az RTL-hez – először ellenőrizd a .mo fájl fordítását és a fájlútvonalakat.
Böngésző fejlesztői eszközök trükk
A Chrome DevToolsban ideiglenesen kényszerítheted az RTL-t bármely oldalon anélkül, hogy módosítanád a WordPress beállításait:
/* Paste in DevTools console as: document.documentElement.dir = 'rtl' */
html {
direction: rtl;
}
Ez gyors előnézetet ad arról, hogyan kezeli a témád az RTL-t, még mielőtt elkezdenéd a fordítást.
Az RTL fordítás automatizálása a megfelelő módon
Az RTL nyelvek kézi fordítása költséges és lassú. A hivatásos arab fordítók prémium árakat számítanak fel, és nehéz találni valakit, aki ismeri mind a nyelvet, mind a WordPress-specifikus Gettext szintaxist.
A SimplePoTranslate ezt egy környezetérzékeny AI motorral oldja meg, amely natívan érti az RTL-specifikus kihívásokat:
- Mind a hat arab többes számú alak automatikusan generálódik. A motorunk beolvassa a
.pofájlban találhatóPlural-Formsfejlécet, és pontosan annyi alakot állít elő, amennyire a célnyelvednek szüksége van. Nincsenek üresmsgstrhelyek, nincsenek angol visszalépések. - Helyőrző biztonság. A változók, mint a
%s,%dés%1$szárolva vannak a fordítás során. A mesterséges intelligencia nem rendezheti át, nem törölheti vagy ronthatja el őket – még akkor sem, ha az arab nyelvtan más szórendet javasol. Tudj meg többet arról, hogyan védi a szintaxiszárolás a kódot. - Kétirányú kontextus. A mesterséges intelligencia megérti, hogy a vegyes irányú karakterláncok különleges kezelést igényelnek, és megőrzi a HTML irányultsági attribútumait.
Akár egy blogtémát lokalizálsz egy héber közönség számára, akár egy teljes WooCommerce áruházat fordítasz perzsára, a folyamat ugyanaz: töltsd fel a .po fájlt, válaszd ki a célnyelvedet, és töltsd le a lefordított fájlt. A teljes munkafolyamat percekig tart, nem napokig.
A WordPress lokalizációs folyamatának teljes bemutatásához tekintsd meg a WordPress lokalizáció végső útmutatóját.
Ne kezeld az RTL-t utólagos gondolatként
A jobbról balra íródó nyelvek több mint egymilliárd potenciális felhasználót képviselnek. Az arab a világ ötödik legelterjedtebb nyelve. A héber és a perzsa kritikus piacokat szolgál ki a Közel-Keleten és Közép-Ázsiában.
Ha a WordPress webhelyed nem tudja kiszolgálni ezeket a felhasználókat egy csiszolt, natív érzésű élménnyel, akkor találnak egy olyan versenytársat, amelyik igen.
A jó hír: a WordPress már rendelkezik az infrastruktúrával. A témádnak csak megfelelő CSS-re van szüksége, és a .po fájlokhoz olyan fordítóeszközre van szükség, amely tiszteletben tartja az RTL nyelvek összetettségét.
Készen állsz arra, hogy lefordítsd a WordPress webhelyedet arabra, héberre vagy perzsára? Kezdd el ingyen a SimplePoTranslate.com oldalon!