0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Часто в крупных компаниях разработчикам нужно создать сайт на нескольких языках. Это просто со стороны бекенд-разработки, но усложняет работу фронтенд-разработчикам, верстальщикам и тестировщикам.</p>
1
<p>Часто в крупных компаниях разработчикам нужно создать сайт на нескольких языках. Это просто со стороны бекенд-разработки, но усложняет работу фронтенд-разработчикам, верстальщикам и тестировщикам.</p>
2
<p>В этом уроке разберемся, в чем сложность создания мультиязычного сайта, и какие подводные камни скрывает простой перевод текстов на странице.</p>
2
<p>В этом уроке разберемся, в чем сложность создания мультиязычного сайта, и какие подводные камни скрывает простой перевод текстов на странице.</p>
3
<h2>Мультиязычность и длина слов</h2>
3
<h2>Мультиязычность и длина слов</h2>
4
<p>Чтобы посмотреть, как разные языки влияют на расположение блоков, возьмем главную страницу Хекслета и переведем ее на разные языки. Наложим результаты в редакторе и сравним, как изменяется страница. Для перевода был использован автоматический переводчик, поэтому возможны ошибки в составлении предложений.</p>
4
<p>Чтобы посмотреть, как разные языки влияют на расположение блоков, возьмем главную страницу Хекслета и переведем ее на разные языки. Наложим результаты в редакторе и сравним, как изменяется страница. Для перевода был использован автоматический переводчик, поэтому возможны ошибки в составлении предложений.</p>
5
<p>Воспользуемся следующими версиями сайта:</p>
5
<p>Воспользуемся следующими версиями сайта:</p>
6
<ul><li>Русская</li>
6
<ul><li>Русская</li>
7
<li>Английская</li>
7
<li>Английская</li>
8
<li>Японская</li>
8
<li>Японская</li>
9
</ul><p>Так выглядят русская и английская версии:</p>
9
</ul><p>Так выглядят русская и английская версии:</p>
10
<p>Так выглядят русская и японская версии сайта:</p>
10
<p>Так выглядят русская и японская версии сайта:</p>
11
<p>В этих примерах видно, что в разных языках отличается длина слов внутри одних текстов. Например, текст на японском языке самый компактный, значит, текста на экране помещается больше, чем в русской или английской версиях.</p>
11
<p>В этих примерах видно, что в разных языках отличается длина слов внутри одних текстов. Например, текст на японском языке самый компактный, значит, текста на экране помещается больше, чем в русской или английской версиях.</p>
12
<p>Перевод может сломать блок, если его дизайн разрабатывался под конкретный текст.</p>
12
<p>Перевод может сломать блок, если его дизайн разрабатывался под конкретный текст.</p>
13
<p>Посмотрим на блок с новогодней распродажей на разных языках:</p>
13
<p>Посмотрим на блок с новогодней распродажей на разных языках:</p>
14
<p>В этом примере видна разница в длине текстов, следовательно - в ширине самого баннера. Если разработчики не позаботятся о корректном переносе текстов и высоте и ширине блоков, то это может привести к "поломке" дизайна страницы.</p>
14
<p>В этом примере видна разница в длине текстов, следовательно - в ширине самого баннера. Если разработчики не позаботятся о корректном переносе текстов и высоте и ширине блоков, то это может привести к "поломке" дизайна страницы.</p>
15
<p>Помимо длины слов есть группа языков, которые отличаются направлением написания. В таких языках слова пишутся и читаются не слева направо, а справа налево. Этот нюанс разработчики тоже должны учитывать.</p>
15
<p>Помимо длины слов есть группа языков, которые отличаются направлением написания. В таких языках слова пишутся и читаются не слева направо, а справа налево. Этот нюанс разработчики тоже должны учитывать.</p>
16
<h2>Направление текста в языках</h2>
16
<h2>Направление текста в языках</h2>
17
<p>Мы привыкли, что слова пишутся и читаются слева-направо. Таким же образом мы и смотрим на сайты.</p>
17
<p>Мы привыкли, что слова пишутся и читаются слева-направо. Таким же образом мы и смотрим на сайты.</p>
18
<p>Помимо такого написания есть группы языков, носители которого пишут, читают и смотрят на страницы в другом направлении - справа-налево. Например, к таким языкам относятся арабский и иврит.</p>
18
<p>Помимо такого написания есть группы языков, носители которого пишут, читают и смотрят на страницы в другом направлении - справа-налево. Например, к таким языкам относятся арабский и иврит.</p>
19
<p>Как бы выглядел сайт Хекслета на арабском языке:</p>
19
<p>Как бы выглядел сайт Хекслета на арабском языке:</p>
20
<p>В этом случае не только текст меняет направление, но и изображения меняются местами с текстом. Это связано с тем, что чтение идет справа-налево. В этом случае изображения, которые в русской версии находились справа, будут расположены слева и наоборот.</p>
20
<p>В этом случае не только текст меняет направление, но и изображения меняются местами с текстом. Это связано с тем, что чтение идет справа-налево. В этом случае изображения, которые в русской версии находились справа, будут расположены слева и наоборот.</p>
21
<h2>Как тестировать мультиязычность</h2>
21
<h2>Как тестировать мультиязычность</h2>
22
<p>Чтобы протестировать мультиязычность, нужно просто просмотреть сайт на разных языках. На каждом из языков стоит вернуться к проверке адаптивности, так как различие в длине слов может привести к проблемам с отображением на разных разрешениях.</p>
22
<p>Чтобы протестировать мультиязычность, нужно просто просмотреть сайт на разных языках. На каждом из языков стоит вернуться к проверке адаптивности, так как различие в длине слов может привести к проблемам с отображением на разных разрешениях.</p>
23
<p>Тестировать мультиязычность можно с помощью инструментов разработчика, например, Chrome DevTools или Firefox DevTools. Мы их изучили в прошлых уроках.</p>
23
<p>Тестировать мультиязычность можно с помощью инструментов разработчика, например, Chrome DevTools или Firefox DevTools. Мы их изучили в прошлых уроках.</p>
24
<p>Чтобы проверить адаптивность, в этих инструментах есть режим, который позволяет установить произвольную ширину и высоту устройства.</p>
24
<p>Чтобы проверить адаптивность, в этих инструментах есть режим, который позволяет установить произвольную ширину и высоту устройства.</p>
25
<p>Для входа в режим в Firefox перейдите в DevTools с помощью комбинации клавиш Ctrl + Shift + I или клавиши F12. Затем нажмите на<em>Responsive Design Mode</em>или воспользуйтесь комбинацией клавиш Ctrl + Shift + M:</p>
25
<p>Для входа в режим в Firefox перейдите в DevTools с помощью комбинации клавиш Ctrl + Shift + I или клавиши F12. Затем нажмите на<em>Responsive Design Mode</em>или воспользуйтесь комбинацией клавиш Ctrl + Shift + M:</p>
26
<p>После этого основная область сайта изменится и будет отображать страницу как на мобильном устройстве. Вы можете выбирать разрешения из готовых настроек, в которых находятся самые популярные устройства, или установить высоту и ширину страницы самостоятельно:</p>
26
<p>После этого основная область сайта изменится и будет отображать страницу как на мобильном устройстве. Вы можете выбирать разрешения из готовых настроек, в которых находятся самые популярные устройства, или установить высоту и ширину страницы самостоятельно:</p>
27
<h2>Выводы</h2>
27
<h2>Выводы</h2>
28
<p>В этом уроке мы узнали, что при тестировании мультиязычного сайта следует помнить о разнице в длине предложений на разных языках.</p>
28
<p>В этом уроке мы узнали, что при тестировании мультиязычного сайта следует помнить о разнице в длине предложений на разных языках.</p>
29
<p>Разная длина слов и предложений может изменять дизайн относительно других языков. Чаще всего это выражается в:</p>
29
<p>Разная длина слов и предложений может изменять дизайн относительно других языков. Чаще всего это выражается в:</p>
30
<ul><li>Высоте и ширине блоков</li>
30
<ul><li>Высоте и ширине блоков</li>
31
<li>Переносах слов</li>
31
<li>Переносах слов</li>
32
</ul><p>Также проблемы могут возникать с языками, текст в которых читается справа-налево, например, иврит и арабский язык. В этом случае изменяется не только направление текста, но и общее расположение элементов. Носители этих языков не только читают текст по-другому, но и смотрят на сайты справа-налево.</p>
32
</ul><p>Также проблемы могут возникать с языками, текст в которых читается справа-налево, например, иврит и арабский язык. В этом случае изменяется не только направление текста, но и общее расположение элементов. Носители этих языков не только читают текст по-другому, но и смотрят на сайты справа-налево.</p>
33
<p>Чтобы протестировать мультиязычность сайта, не нужны специальные инструменты. Стоит проверять адаптивность на всех доступных языках, так как различия в длине слов может сказаться на адаптивности страницы.</p>
33
<p>Чтобы протестировать мультиязычность сайта, не нужны специальные инструменты. Стоит проверять адаптивность на всех доступных языках, так как различия в длине слов может сказаться на адаптивности страницы.</p>