Teie Lovable’i rakendus araabia keeles: sõnad tõlgitakse, paigutus mitte

Araabiakeelne build näeb katki välja, kuigi tõlge on korras. Külgriba on vasakul, tagasinool osutab vasakule ja avatari vasak serv on iga kaardi vasakus ääres – iga sõna on araabia keeles, kuid iga kast on seal, kuhu ingliskeelne versioon selle jättis. Teksti suund on HTML-i atribuut koos CSS-i otsustega, mis elavad teie komponentides, ning ükski kataloogifail seda ei sisalda. globalize.now on AI-põhine lokaliseerimisinfrastruktuur, mis eraldab stringid ja hoiab kataloogid iga Git push’i järel sünkroonis.

Miks kuvab mu Lovable’i rakendus araabia keeles endiselt teksti vasakult paremale?

Sest suund on dokumendi ja stiililehe omadus, mitte sõnumi omadus.

Teie kataloogid koosnevad lähte-stringide ja tõlgitud stringide paaridest. Kui need kompileeritakse ar jaoks ja teie komponendid selle renderdavad, muutuvad sõnad, kuid mitte miski muu. Pole vahet, kas kasutate Linguit, kuhu globalize.now kirjutab, või react-i18nexti. Kummaski vormingus pole kohta lausele „ja külgriba läheb teisele poole”.

Muuta tuleb kahte asja. html elemendi atribuut dir ütleb brauserile, kummas suunas inline-telg kulgeb. Teie CSS peab lõpetama külgede nimetamise ning hakkama nimetama selle telje algust ja lõppu. Kõik muu tuleneb neist kahest muudatusest.

Mis Lovable’i rakenduses araabia keele lisamisel tegelikult katki läheb?

Tõrked koonduvad etteaimatavatesse kohtadesse ning kõik need puudutavad stiile, mitte teksti.

• Navigatsioonisahtlid ja külgribad jäävad füüsiliselt vasakule.
• Ševronid, tagasinooled ja edenemisnäidikud osutavad vales suunas.
• Asümmeetriline polsterdus surub sisu vale serva vastu, mistõttu sildid kuhjuvad ühele poole.
• text-left pealkirjal hoiab araabia teksti konteineri vasakus servas.
• Absoluutse positsioneerimisega märgid ja sulgemisnupud satuvad vastasnurka, võrreldes sellega, mida lugeja ootab.
• Aktiivset loendiüksust tähistavad vasakpoolsed äärised ilmuvad juhtserva asemel järelserva.
• Araabiakeelses lauses olev ingliskeelne tootekood paigutub ilma suunavihjeta ettearvamatult ümber.

Ükski neist pole tõlkeviga. Kõigi taga on klassinimesse sisse kirjutatud füüsiline suund.

Kuidas tuletada tekstisuund lokaalisildist?

Küsige lokaali käest, millist suunda see kasutab, ja kirjutage vastus dokumendile.

Intl.Locale.prototype.getTextInfo() tagastab lokaalisildi jaoks suuna ltr või rtl. See jõudis 2026. aasta juulis Baseline’i äsja saadaval olekusse, mis tähendab, et see on olemas kõigi põhibrauserite praeguses versioonis, kuid mitte enamikus brauserites, mida teie kasutajad tegelikult kasutavad. Käsitlege allolevat varuvarianti aktiivse lahendusena ja API-t mehhanismina, mis selle lõpuks asendab.

// getTextInfo() is not yet in TypeScript's bundled Intl.Locale definitions.
declare global {
  namespace Intl {
    interface Locale {
      getTextInfo?(): { direction: "ltr" | "rtl" };
    }
  }
}

// Stopgap for runtimes without getTextInfo(). This set is the one place where
// adding a new right-to-left language still costs you a code change.
const RTL_FALLBACK = new Set([
  "ar", "he", "fa", "ur", "ps", "sd", "yi", "dv", "ckb", "ug", "nqo", "syr",
]);

export function directionFor(locale: string): "ltr" | "rtl" {
  let tag: Intl.Locale | undefined;
  try {
    tag = new Intl.Locale(locale);
  } catch {
    // Malformed tag. Fall through to the string path below.
  }

  const direction = tag?.getTextInfo?.().direction;
  if (direction === "ltr" || direction === "rtl") return direction;

  const language = tag?.language ?? locale.split(/[-_]/)[0].toLowerCase();
  return RTL_FALLBACK.has(language) ? "rtl" : "ltr";
}

Olulised on kaks try kohta. new Intl.Locale() annab vigase sildi korral RangeError, getTextInfo() aga puudub vanemates runtime’ides lihtsalt. Ainult teise juhtumi käsitlemine on tavaline viga: päringustringist saabuv lokaali nagu ar_EG suunab funktsiooni oma taasteteesse ja sealt otse tagasi püüdmatuks jäänud veaks.

Määrake mõlemad atribuudid seal, kus teie rakendus aktiivset lokaali juba teab. Lovable loob praegu kahte tüüpi projekte: Vite’i ühe lehe rakenduse ja serveris renderdatava TanStack Starti rakenduse, seega kontrollige, mida teie projekt tegelikult genereeris. TanStack Startis on see juurdokumendi komponent, Vite’is aga koht, kuhu paigaldate i18n-i pakkuja.

<html lang={locale} dir={directionFor(locale)}>

Pange dir elemendile html, mitte ümbris-div-le. Portaalid, modaalid ja teavitused renderdatakse väljaspool teie komponendipuud ning peavad selle endiselt pärima.

Milliseid Tailwindi klasse pean paremalt vasakule suuna jaoks muutma?

Neid, mis nimetavad füüsilist külge. Nende loogilised vasted järgivad inline-telge ja pöörduvad ise ümber, kui dir muutub.

Tailwindi marginaalidokumentatsioon näitab mõju otse: ms-8 ja me-8, mis on renderdatud konteinerites dir="ltr" ja dir="rtl", paiknevad vastaskülgedel. Loogiliste omaduste utiliidid lisati Tailwind v3.3-s, seega ei pruugi neid pika ajalooga projektis olla.

Kaks utiliiti vajavad ümbernimetamise asemel lähemat vaatlust. space-x-* ja divide-x-* lisavad õdede-vendade vahele vahed ja servad, mistõttu paiknevad need ümberpööratud reas iga elemendi valel küljel. Tailwind pakub just selle juhtumi jaoks space-x-reverse ja divide-x-reverse. Vertikaalsed utiliidid, näiteks mt-* ja pb-*, ei vaja muudatusi, sest suund määrab ainult reasuunalise telje.

Mida loogilised omadused parandada ei saa?

Kõike, mis kodeerib suunda väljaspool kastimudelit – siin tulevadki mängu variandid rtl: ja ltr:.

<ChevronRight className="rtl:rotate-180" />
<div className="bg-[url(/hero.svg)] bg-left rtl:bg-right" />
<div className="shadow-[4px_0_8px_rgba(0,0,0,.15)] rtl:shadow-[-4px_0_8px_rgba(0,0,0,.15)]" />

Teisendused, taustapositsioonid, varjunihe, gradientide nurgad, karusselli kerimise arvutused ja ikoonid, mis tähistavad „edasi“, kuuluvad siia. Hoidke loend lühikesena. Kui kirjutate rtl: igale teisele elemendile, on aluseks olevad stiilid endiselt füüsilised ja tuleks hoopis teisendada.

Kasutaja loodud sisu vajab eraldi käsitlust ning need kaks juhtumit on erinevad. Terve ploki puhul, mille keelt te ei kontrolli, võimaldab dir="auto" brauseril määrata ploki põhisuuna esimese tugeva märgi järgi.

<p dir="auto">{review.body}</p>

Võõrkirjas tekstijupi puhul juba suunatud lauses – näiteks ingliskeelne SKU araabiakeelses tekstis – ei tee dir="auto" midagi, sest see määrab lõigu põhisuuna ega isoleeri reasuunalist tekstijuppi. Selle asemel ümbritsege see jupp vastava ümbrisega.

<bdi>{product.sku}</bdi>

Miks ei saa tõlkevidin teie paigutust teie eest ümber pöörata?

Sest vidin töötab renderdatud lehe tekstisõlmedega, kuid suunaprobleem peitub selle lehe loonud stiilides.

Käitusaegne teenus võib lisada dokumendile dir="rtl" ja tõlkida nähtavad stringid pärast ingliskeelse versiooni renderdamist. See ei saa teie komponente avada ja muuta ml-4 väärtuseks ms-4, sest ml-4 on stiililehel, mida teenus ei halda, juba kompileeritud kujule margin-left. Tulemuseks on araabiakeelne tekst vasakult paremale kulgevas paigutuses.

Sellega kaasneb veel üks kulu. Mõnes Lovable'i rakenduses kasutatav käitusaegne tõlketeenus Lovalingo on teatanud, et suletakse 31. augustil 2026 kell 23:59 CEST. Migratsioonijuhis soovitab klientidel üle minna projektipõhisele rahvusvahelistamisele ning enne teenuse eemaldamist uuesti kontrollida lokaalide marsruute, kanoonilisi URL-e ja hreflang-seadeid. Tarnija tootes tehtud paigutustöö lahkub koos tarnijaga. Loogilised utiliidid ja teie enda hoidlas olev dir atribuut ei lahku. Meie Lovalingo võrdlus esitab sama argumendi stringikihi kohta.

Kuidas takistada järgmisel Lovable'i viibal seda tagasi pööramast?

Teisendage üks kord ja muutke füüsilised utiliidid koodiülevaatusel nähtavaks.

1. Paigaldage töövoog. Lisage Lovable'i tööruumis oskus lovable-i18n ja paluge Lovable'il i18n seadistada. Väljaspool redaktorit on paigaldus npx skills add globalize-now/globalize-skills, kusjuures --all paigaldab selle kõigile agentidele.
2. Määrake suund lokaali põhjal, kasutades ülal directionFor, elemendil html.
3. Teisendage füüsilised utiliidid oma komponentides loogilisteks, alustades sellest, mis teie lehti ümbritseb.
4. Lisage rtl: variandid ainult teisenduste, taustade, varjude ja suunda näitavate ikoonide jaoks ning kasutage reasuunaliste võõrkirjas tekstijuppide puhul <bdi>.
5. Lisage ülevaatusse grep-kontroll, et äsja genereeritud füüsiline utiliit ei läbiks enne ühendamist kontrolli.

rg -n '\b(ml|mr|pl|pr|scroll-m[lr])-|\b(float|clear|text)-(left|right)\b|\bborder-[lr]\b|\brounded-[lr]-|\b(left|right)-[0-9]' src/

Viies samm on see, mis päriselt püsima jääb. Lovable genereerib komponente iga viiba järel uuesti ning seadete paneeli lisama palutud mudel kasutab ml-4, sest füüsilised utiliidid domineerivad Reacti koodis, mille põhjal need mudelid on treenitud. Pull requesti läbikukkumist põhjustav kontroll on odavam kui probleemi avastamine kolm nädalat hiljem araabiakeelsest ekraanipildist.

Stringide pool töötab iseseisvalt. globalize.now eraldab Lovable'i genereeritust uued hardcoded stringid, kirjutab need teie kataloogidesse ja sünkroonib iga Git push'i järel, nii et araabiakeelne build püsib ajakohasena, samal ajal kui teie jätkate viipade kirjutamist. Sama mehhanismi kirjeldavad Vite'i juhend ja TanStack Starti juhend ning just seetõttu ei lähe tõlked iga push'iga katki.

Araabia keele lisamine ei maksa paketis midagi juurde. Starter-pakett maksab 20 € kuus tööruumi kohta ning sisaldab 20 € väärtuses tõlkekrediiti – umbes 200 000 sõna. Pärast selle kasutamist jätkub arvestus sama tähemärgipõhise hinnaga, ilma kasutaja- või keelepõhiste lisatasudeta; kaasatud on ka paremalt vasakule kirjutavad keeled. Seadistamise kohta leiate rohkem teavet Lovable'i integratsioonilehelt, tehnilised üksikasjad on arendajate lehel ning mittetehnilistele loojatele on lühem tee vibe-koodijate lehel.

Üks paigutusmuudatus ja see jääbki paika

Suund on otsus, mille teie hoidla teeb ühe korra. Stringid on see osa, mis muutub iga viibaga, ja see osa töötab iseseisvalt.