Strona główna » Poradniki » Grafika SVG » Lokalizowanie treści

Lokalizowanie treści

Wstęp

Dzisiejszy świat bardzo się skurczył i nikogo już nie dziwi, że wstawiony obrazek kilka sekund później mógł zostać wyświetlony na drugim końcu globu. Jednak jeśli obrazek zawiera pewne teksty to może się okazać, że nie każdy będzie mógł go zrozumieć. W takim przypadku obrazek należałoby przygotować w każdym języku oddzielnie. Takie rozwiązanie jest bardzo czasochłonne i wcale nie gwarantuje, że ktoś będzie wiedział, że istnieje przetłumaczona wersja rysunku.

Jak wiadomo grafika SVG jest generowana po stronie klienta, dlatego możliwe jest, aby program w zależności od pewnych zmiennych pozwolił na wyświetlenie tekstu w zależności od ustawionego lokalnie języka w systemie. Jest to rozwiązanie, które gwarantuje, że każdy będzie mógł to zrozumieć (zakładając, że tekst zostanie przetłumaczony na wszystkie języki). Co więcej poprawkę rysunku wystarczy wtedy nanieść w jednym pliku, a nie w wielu plikach.

Wybór tekstu

Na początek prosty przykład, który wyświetli z jakiego języka korzysta użytkownik:

EnglishPolski?

Powyższy przykład w zależności od preferowanego języka wyświetli Polski, English, albo ?. Można to przetestować zmieniając preferowane języki z poziomu przeglądarki. Przykładowo wtedy wystarczy obniżyć priorytet języka polskiego (pl), aby wyświetlony został tekst przeznaczony dla osób preferujących angielski (en).

Zasada działania

W trakcie renderowania grafiki przeglądarka podejmuje decyzje o tym jaki tekst wyświetlić na podstawie listy kodów preferowanych języków wyświetlania zawartości strony internetowej. W celu skorzystanie z tego należy odpowiednie obiekty wstawić do obiektu switch, a w każdym podobiekcie dodać atrybut systemLanguage, a jego wartość ustawić na odpowiedni kod języka. Obiekt wyświetlany domyślnie to ten, który nie będzie miał ustawionego atrybutu systemLanguage. Ostatni element to atrybut allowReorder z wartością yes w obiekcie switch, aby przeglądarka mogła pokazać / ukryć odpowiednie obiekty.

Kod powyższego przykładu wygląda następująco:

  1. <svg xmlns="http://www.w3.org/2000/svg" width="320" height="40">
  2.   <g transform="translate(10,30)" style="font-size:20px;stroke:black">
  3.     <switch allowReorder="yes">
  4.       <text systemLanguage="en">English</text>
  5.       <text systemLanguage="pl">Polski</text>
  6.       <text>?</text>
  7.     </switch>
  8.   </g>
  9. </svg>

(3.) Zadeklarowanie obiektu switch i zezwolenie na dostosowanie treści. Wyszczególnienie przypadków dla języka: (4.) angielskiego, (5.) polskiego i (6.) nieznanego. (7.) Zamknięcie obiektu switch.

Drugi przykład

Obiekt switch można zastosować nie tylko do obiektów typu text, ale do każdego innego. W ten sposób prócz wyświetlenie nazwy języka można obok wyświetlić flagę. Prezentuje to poniższy przykład:

EnglishPolski?

Wtedy kod wygląda następująco:

  1. <svg xmlns="http://www.w3.org/2000/svg" width="320" height="40">
  2.   <g transform="translate(10,30)" style="font-size:20px;stroke:black">
  3.     <switch allowReorder="yes">
  4.       <g systemLanguage="en">
  5.         <text>English</text>
  6.         <rect x="70" y="-16" width="18" height="12" fill="blue"/>
  7.         <g stroke="white" stroke-width="2">
  8.           <polyline points="70,-16 88,-4" />
  9.           <polyline points="70,-4 88,-16" />
  10.           <polyline points="79,-4 79,-16" />
  11.           <polyline points="70,-10 88,-10" />
  12.         </g>
  13.         <g stroke="red" stroke-width="1">
  14.           <polyline points="70,-16 88,-4" />
  15.           <polyline points="70,-4 88,-16" />
  16.           <polyline points="79,-4 79,-16" />
  17.           <polyline points="70,-10 88,-10" />
  18.         </g>
  19.         <rect x="70" y="-16" width="18" height="12" fill="none"/>
  20.       </g>
  21.       <g systemLanguage="pl">
  22.         <text>Polski</text>
  23.         <rect x="70" y="-16" width="18" height="6" fill="white"/>
  24.         <rect x="70" y="-10" width="18" height="6" fill="red"/>
  25.       </g>
  26.       <text>?</text>
  27.     </switch>
  28.   </g>
  29. </svg>

Tym razem atrybut systemLanguage jest przypisany do obiektu g. W zależności od języka wyświetlany jest odpowiedni napis oraz jego flaga.

Zastosowanie

Dostosowywanie tekstu i zawartości rysunku na podstawie preferowanego języka użytkownika z pewnością pozwoli na tworzenie międzynarodowych infografik, wykresów czy komiksów, który będzie mógł zostać przetłumaczony na dowolny język. Jest to niewątpliwa zaleta, która choć już dawno obsługiwana przez przeglądarki pewnie zbyt szybko nie zdobędzie popularności ze względu na różne problemy z obsługą plików grafiki wektorowej na różnych platformach. Niemniej już dziś warto uwzględnić to w swoich projektach.

Zadania

Zadanie 1

RedGreenBlueCzerwonyZielonyNiebieski