Jūsu Lovable lietotne arābu valodā: vārdi ir iztulkoti, izkārtojums — nē

Arābu valodas versija izskatās salauzta, kaut tulkojums ir kārtībā. Sānjosla ir kreisajā pusē, atpakaļejošā bulta rāda uz kreiso pusi, avatārs pieplakts pie katras kartītes kreisās malas — katrs vārds ir arābu valodā, bet katra kastīte tur, kur to atstāja angļu valodas versija. Teksta virziens ir HTML atribūts kopā ar CSS lēmumu kopumu, kas dzīvo jūsu komponentos, un nekāds katalogs faila neietver to. globalize.now ir AI darbināta lokalizācijas infrastruktūra, kas izvelk tekstus un notur katalogus sinhronizētus ar katru Git izlaidumu.

Kāpēc mana Lovable lietotne arābu valodā vēl lasās no kreisās uz labo?

Tāpēc, ka virziens ir dokumenta un stilu lapas īpašība, nevis paziņojuma īpašība.

Jūsu katalogi ir avota un tulkotu tekstu pāri. Kad tie tiek kompilēti ar un jūsu komponenti to renderē, mainās vārdi, un nekas cits. Vai šie katalogi ir Lingui, kurā rakstos globalize.now, vai react-i18next — tas šeit neko nemaina. Nevienam no formātiem nav vietas, kur ierakstīt “un sānjosla pāriet uz otru pusi”.

Ir nepieciešamas divas izmaiņas. Atribūts dir elementā html pasaka pārlūkam, kurā virzienā rit iekšējā (inline) ass. Jūsu CSS jāpāriet no fizisko malu nosaukšanas uz šīs ass sākuma un beigu nosaukšanu. Viss pārējais izriet no šīm divām izmaiņām.

Kas tieši sabojājas, pievienojot arābu valodu Lovable lietotnei?

Kļūmes koncentrējas prognozējamās vietās, un visas tās ir stila, nevis satura problēmas.

• Navigācijas paneļi un sānjoslas paliek fiziski kreisajā pusē.
• Bultas, atpakaļejošās bultas un progresa indikatori rāda uz nepareizu pusi.
• Asimetriskas atkāpes piespiedina saturu pie nepareizās malas, tāpēc etiketes sakrājas vienā pusē.
• text-left virsrakstā notur arābu tekstu piespiestu pie tā konteinera kreisās malas.
• Absolūti pozicionētas nozīmītes un aizvēršanas pogas nokrīt pretējā stūrī no tā, ko lasītājs sagaida.
• Kreisās malas rāmji, kas iezīmē aktīvu saraksta vienumu, parādās aizmugurējā malā, nevis priekšējā.
• Angļu produkta kods arābu teikuma vidū pārkārtojas neprognozējami, ja nav norādīts virziens.

Nekas no tā nav tulkojuma defekts. Katra šī problēma ir fizisks virziens, kas ierakstīts klases nosaukumā.

Kā noteikt teksta virzienu no lokāles apzīmējuma?

Pajautājiet lokālei, kādu virzienu tā izmanto, un pēc tam ierakstiet atbildi dokumentā.

Intl.Locale.prototype.getTextInfo() atgriež virzienu — vai ltr, vai rtl — konkrētam lokāles apzīmējumam. Tas kļuva par jaunāko Baseline pieejamo iespēju 2026. gada jūlijā, tas nozīmē, ka tas parādās katras galvenās pārlūkprogrammas jaunākajā versijā, taču ne vairākumā pārlūku, kuras jūsu lietotāji faktiski izmanto. Uzskatiet zemāk norādīto rezervju risinājumu par aktuālo ceļu, un šo API — par to, kas to laika gaitā aizstāj.

// 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";
}

Šīs divas try vietas ir svarīgas. new Intl.Locale() izmet RangeError nekorektam apzīmējumam, un getTextInfo() vecākos izpildlaikos vienkārši nav pieejama. Apstrādāt tikai otro ir bieža kļūda: lokāle, piemēram, ar_EG, kas nāk no vaicājuma virknes, funkciju iesūta pašas atkopšanas ceļā un tieši atgriež kā neapstrādātu kļūdu.

Iestatiet abus atribūtus visur, kur jūsu lietotne jau zina aktīvo lokāli. Lovable šobrīd izveido divus veidus — Vite vienas lapas lietotni un servera pusē renderētu TanStack Start lietotni, tāpēc pārbaudiet, ko jūsu projekts patiesībā ir izveidojis. TanStack Start gadījumā tas ir saknes dokumenta komponents. Vite gadījumā — tā vieta, kur jūs pievienojat i18n nodrošinātāju.

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

Novietojiet dir uz html, nevis uz ietērpa div. Portāli, modālie logi un paziņojumi (toasts) tiek renderēti ārpus jūsu komponentu koka, un tiem tik un tā ir nepieciešams šo iestatījumu pārmantot.

Kuras Tailwind klases jāmaina, lai atbalstītu no labās uz kreiso virzienu?

Tās, kas nosauc fizisku malu. To loģiskie ekvivalenti sekot iekšējai (inline) asij un mainās pati par sevi, kad dir mainās.

Tailwind margin dokumentācija to parāda tieši: ms-8 un me-8, renderēti dir="ltr" un dir="rtl" konteineros, nonāk pretējās pusēs. Loģisko īpašību utilītas parādījās Tailwind v3.3 versijā, tāpēc senāks projekts tās var nemaz nesatur.

Divām utilītām nepieciešams nevis pārsaukums, bet tuvāks paskatīšanās. space-x-* un divide-x-* pievieno atstarpi un rāmjus starp brāļu elementiem, tāpēc apgrieztā rindā tie nonāk nepareizajā pusē katram bērnelementam. Tailwind šim precīzajam gadījumam piedāvā space-x-reverse un divide-x-reverse. Vertikālajām utilītām, tādām kā mt-* un pb-*, nekas nav vajadzīgs, jo virziens pārvalda tikai iekšējo (inline) asi.

Ko loģiskās īpašības nespēj izlabot?

Visu, kas kodē virzienu ārpus kastes modeļa — tieši tur savu vietu iegūst rtl: un ltr: varianti.

<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)]" />

Transformācijas, fona pozīcijas, ēnu nobīdes, gradientu leņķi, karuseļu ritināšanas matemātika un jebkura ikona, kas nozīmē “uz priekšu”, pieder šeit. Turiet šo sarakstu īsu. Ja rtl: ir jāraksta uz katra otrā elementa, tas nozīmē, ka pamatā esošie stili vēl ir fiziski un tos tā vietā vajadzētu pārveidot.

Lietotāju radītam saturam nepieciešama sava pieeja, un šie divi gadījumi ir atšķirīgi. Veselam blokam, kura valodu jūs nekontrolējat, dir="auto" liek pārlūkam noteikt bloka bāzes virzienu pēc tā pirmās izteiktās rakstzīmes.

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

Svešvalodas rakstzīmju posmam jau virzienā ietvertā teikuma vidū, piemēram, angļu SKU kodam arābu valodas tekstā, dir="auto" neko nedara, jo tas iestata rindkopas bāzes virzienu, nevis izolē iekšēju (inline) posmu. Tā vietā ietvériet šo posmu atsevišķi.

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

Kāpēc tulkošanas rīks nevar par jums apvērst izkārtojumu?

Tāpēc, ka rīks darbojas ar teksta mezgliem renderētajā lapā, bet jūsu virziena problēma slēpjas stilos, kas šo lapu izveidoja.

Izpildlaika pakalpojums var ievietot dir="rtl" dokumentā un iztulkot redzamos tekstus pēc tam, kad angļu valodas versija ir jau attēlota. Tas nevar atvērt jūsu komponentus un pārvērst ml-4 par ms-4, jo ml-4 jau ir kompilēts uz margin-left stilu lapā, kura nav šī pakalpojuma pārziņā. Rezultāts ir arābu teksts izkārtojumā, kas vēl vērsts no kreisās uz labo pusi.

Ir arī otras izmaksas. Lovalingo, izpildlaika tulkošanas pakalpojums, kas tiek izmantots dažās Lovable lietotnēs, ir paziņojis, ka tā darbība beigsies 2026. gada 31. augustā 23:59 pēc CEST laika. Tā migrācijas vadlīnijas klientiem iesaka pāriet uz projekta pašu īstenotu internacionalizāciju un pārbaudīt lokalizācijas maršrutus, canonical URL un hreflang atzīmes, pirms noņemt pakalpojumu. Izkārtojuma darbs, kas veikts pakalpojuma sniedzēja produktā, pazūd līdz ar šo pakalpojuma sniedzēju. Loģiskās utilītas un dir atribūts jūsu pašu repozitorijā — nepazūd. Mūsu Lovalingo salīdzinājums izsaka to pašu argumentu par teksta slāni.

Kā panākt, lai nākamais Lovable uzvedne to visu neatceltu?

Konvertējiet vienreiz, tad padariet fiziskās utilītas redzamas kodu pārskatā.

1. Uzstādiet darbplūsmu. Lovable darbvietā pievienojiet lovable-i18n prasmi un uzdodiet Lovable uzstādīt i18n. Ārpus redaktora uzstādīšana notiek ar npx skills add globalize-now/globalize-skills, ar --all, lai uzstādītu to katram aģentam.
2. Iestatiet virzienu no lokāles, izmantojot directionFor iepriekš aprakstīto, elementā html.
3. Pārveidojiet fiziskās utilītas uz loģiskajām visos savos komponentos, sākot ar to, kas ietver jūsu lapas.
4. Pievienojiet rtl: variantus vienīgi transformācijām, foniem, ēnām un virziena ikonām, un izmantojiet <bdi> iekšējiem svešvalodas rakstzīmju posmiem.
5. Pievienojiet grep pārbaudi kodu pārskata procesam, lai jaunizveidota fiziskā utilīta neizdodas pirms sapludināšanas.

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/

Piektais solis ir tas, kas patiesi noturas. Lovable atjaunino komponentus ar katru uzvedni, un modelis, kuram lūgts pievienot iestatījumu paneli, izvēlēsies ml-4, jo fiziskās utilītas dominē tajā React kodā, ar kuru šie modeļi tika apmācīti. Pārbaude, kas noraida pull request, ir lētāka nekā problēmas atklāšana arābu valodas ekrānšāviņā trīs nedēļas vēlāk.

Teksta puse šajā ciklā darbojas pati. globalize.now izvelk jaunos burtiskos tekstus no visa, ko Lovable ir izveidojis, ieraksta tos jūsu katalogos, un sinhronizē ar katru Git izlaidumu, tāpēc arābu valodas versija paliek aktuāla, kamēr jūs turpiniet dot uzvednes. Tas ir tas pats mehānisms, kas aprakstīts Vite rokasgrāmatā un TanStack Start rokasgrāmatā, un tas tieši ir iemesls, kāpēc tulkojumi vairs nesabojājas ar katru izlaidumu.

Arābu valodas pievienošana neko papildu neizmaksā plāna ietvaros. Starter plāns ir €20 mēnesī par darbvietu, ietverot €20 tulkošanas kredītu (apmēram 200 000 vārdu), un lietojums pēc tam turpina rēķinēties pēc tā paša tarifa par rakstzīmi, nav nekādu maksu par lietotāju vai valodu skaitu, un no labās uz kreiso valodas ir iekļautas. Vairāk par uzstādīšanu — Lovable integrācijas lapā, tehniski detaļas — izstrādātāju lapā, un īsāks ceļš netehniskiem veidotājiem — vibe kodētāju lapā.

Viena izkārtojuma izmaiņa, un tad tā paliek nemainīga

Virziens ir lēmums, ko jūsu repozitorijs pieņem vienreiz. Teksti ir tā daļa, kas mainās ar katru uzvedni, un šī daļa risinās pati.