Překlad frontendu ve Vue

hknmtt

  • ***
  • 135
    • Zobrazit profil
    • E-mail
Překlad frontendu ve Vue
« kdy: 28. 11. 2024, 09:46:47 »
Mam FE napisany vo Vue a riesim aktualne preklad. Mam svoj vlastny system ktory riesi preklad, ale v principe je velmi podobny Vue i18n, akurat ze taha data cez api z backendu namiesto velkeho jsonu.

Co je ale univerzalny problem je preklad blokov textu, alebo ak text obsahuje komponenty.

Uz len taka blbost ako:

Kód: [Vybrat]
<p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
Robi problem, kedze obsahuje dynamicky komponent. Na vyriesenie by som musel routu predgenerovat a dodat ako string, alebo natvrdo zaclenit do prekladu ako relativnu cestu. Co je v pohode, pokial sa neriesia parametre(napriklad id aktualneho uzivatela). Samozrejme to znemozni jednoducho zmenit cestu pre rotuy bez naslednej aktualizacie vsetkych prekladov ktore maju cestu natvrdo v sebe. V praxi teda nepouzitelne a musel by som robit string formating nahradzanim obsahu v stringoch dynamickymi argumentmi(co je ok a bezna prax).

Dalej su tu bloky textu kedy nie len ze mozu obsahovat dalsie komponenty, ako priklad hore, ale aj html(popravde aj priklad hore), takze renderovanie prekladu musi byt riesene cez v-html, lenze tam je zase problem ze rodic nie vzdy musi byt div, takze preto element musi byt konfigurovatelny. Pripadne sa to da riesit cez vue direktivu ale v principe je to jedno, lebo preklad samotny musi obsahovat html, co je niekedy ok ale inokedy zase to html moze byt renderovane komponentou, ktora aj casto bude mat nejake atributy a to je nemozne riesit v tomto kontexte.

Napriklad:

Kód: [Vybrat]
<div>
  <p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
  <FooComponent class="foo bar car" :some="'value'" :and="5" :current-user="getUid()" />
  <p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
</div>

Pretoze je jedna vec spravit string formating/replacement ak ide o nahradu "foo %" na "foo 5", ale riesit komponenty skratka mozne nie je, kedze su to dynamicke objekty ktore vratia dynamicke(eventy, reaktory..) html az ked ich Vue vyrenderuje. Cize toto je absolutne neschodne riesenie.

Je mozne velke bloky rozkuskovat na jednotlive vety a to sa da ale zase mi pride ze to je take skriabanie sa lavou rukou za pravym uchom, ako sa hovori.

Takze zatial som nejak neni spokojny so ziadnym riesenim a zaujima ma, ze ako ludia riesia tento problem v praxi?

Prakticky akykolvek moderny JS framework asi ma totozny problem, React, Vue,.. je to jedno, rovnaky  princip problemu.


Re:Ako na preklad Vue frontendu?
« Odpověď #1 kdy: 28. 11. 2024, 11:42:26 »
S žádnými JS frameworky sice nedělám, ale překladům různých systémů a aplikací se věnuji už hodně dlouho a funguje to asi takto:

  • delší texty se kouskují do vět běžně
  • do textu k překladu patří jen to, co se má skutečně přeložit, vše ostatní se nahrazuje tagy a ty se pak injektují pomocí jako parametry v další funkci (sprintf apod.) nebo v překladové funkci (Vue i18n má k tomuto účelu $t).
  • HTML tagy do překládaného textu nepatří vůbec, od toho jsou šablonovací systémy

hknmtt

  • ***
  • 135
    • Zobrazit profil
    • E-mail
Re:Překlad frontendu ve Vue
« Odpověď #2 kdy: 28. 11. 2024, 16:49:44 »
1. jasne, nie je problem.
2. to je prave v tychto modernych js frameworkoch nemozne z dovodov ktore som jasne popisal
3. to iste co bod 2

Re:Překlad frontendu ve Vue
« Odpověď #3 kdy: 01. 12. 2024, 09:13:47 »
V Reactu používame https://react.i18next.com/latest/trans-component, předpokládám, že něco na podobném principu bude k dispozici i pro Vue.

BoneFlute

  • *****
  • 1 986
    • Zobrazit profil
Re:Překlad frontendu ve Vue
« Odpověď #4 kdy: Dnes v 02:17:31 »
Protože jsem se zamiloval do https://projectfluent.org/, tak já bych to řešil takto:

1/ Text nekouskovat, nemá-li to smysl.
2/ Na formátování použít ořezané html, nebo markdown.
3/ odkazy nebo objekty bych řešil pomocí placeholderu. Takže příklad ze zadání bych řešil takto:

Kód: [Vybrat]
<p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>bych řešil:
Kód: [Vybrat]
Lorem Ipsum <a foo.bar>dolor</a> sit amet.Poznámka: Překladatel potřebuje vědět, co má umístit do odkazu, a kam ten odkaz umístit. Ale nezajímá ho vlastní odkaz, jeho formát ani kam vede.

Kód: [Vybrat]
<div>
  <p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
  <FooComponent class="foo bar car" :some="'value'" :and="5" :current-user="getUid()" />
  <p>Lorem Ipsum <router-link :to="{name: 'foo.bar}">dolor</router-link> sit amet.</p>
</div>
bych řešil:
Kód: [Vybrat]
  <p>Lorem Ipsum <a foo.bar>dolor</a> sit amet.</p>
  <component foo />
  <p>Lorem Ipsum <a foo.bar>dolor</a> sit amet.</p>

případně markdownem:
Kód: [Vybrat]
  Lorem Ipsum <a foo.bar>dolor</a> sit amet.
 
  <component foo />
 
  Lorem Ipsum <a foo.bar>dolor</a> sit amet.


hknmtt

  • ***
  • 135
    • Zobrazit profil
    • E-mail
Re:Překlad frontendu ve Vue
« Odpověď #5 kdy: Dnes v 03:52:20 »
Na koniec mi prislo ze jedine rozumne riesenie je mat template pre kazdy jazyk a proste robit switch. Pretoze injektovat dynamicke komponenty do prelozitelneho textu je sice niekedy mozne, ale duplom nie ak ma komponent otvaraci a zatvaraci tag, pretoze skor ci neskor sa tym pokasle sklonovanie a vznikol by z toho spagetovy kod.

Takze proste:
Kód: [Vybrat]
<template>
<Czech v-if="lang === 'CS' />
<Slovak v-else-if="lang === 'SK' />
<German v-if="lang === 'DE' />
<English v-else />
</template>

<script>
import Czech from 'components/foo/languages/CZ.vue
...
</script>

Rezat text je mozne len ak ide o kratke slovne spojenia a vety ale nie ak ide o bloky textu napriklad.

Priklonil by som sa skor k tomu aby sa switch dial na urovni routeru ale zda sa, ze to nie je mozne, lebo nie je moze dynamicy prepisat 'component' v route, napriek tomu ze je to funkcia ktora len inkluduje template. Proste treba switchovat priamo vo vue template az.
« Poslední změna: Dnes v 03:56:54 od hknmtt »

BoneFlute

  • *****
  • 1 986
    • Zobrazit profil
Re:Překlad frontendu ve Vue
« Odpověď #6 kdy: Dnes v 14:14:32 »
...
Jen tak pro zajímavost, a v jaké podobě to dostane překladatel?

BoneFlute

  • *****
  • 1 986
    • Zobrazit profil
Re:Překlad frontendu ve Vue
« Odpověď #7 kdy: Dnes v 14:19:27 »
Pokud ti na tom záleží, tak toto
Pretoze injektovat dynamicke komponenty do prelozitelneho textu je sice niekedy mozne, ale duplom nie ak ma komponent otvaraci a zatvaraci tag, pretoze skor ci neskor sa tym pokasle sklonovanie a vznikol by z toho spagetovy kod.
bych ti radil ještě dobře promyslet. IMHO se mýlíš. A je samozřejmě škoda, když na základě chybného předpokladu vybereš neoptimální řešení.