Немецкий наполнитель для проверки вёрстки: составные слова, которым негде переноситься, и подписи, вырастающие на треть. Всё считается в браузере — текст никуда не отправляется.
Ничего не отправляется на сервер — текст собирается в браузере
Tag wird Auftragsbestätigung Abend an Bestellübersicht Fußgängerübergang, es Gebrauchsanweisung selbst Freund. Er Müller er Datenschutz singen nächste Bahnhofsvorplatz mit Geist Startseite Hand, Angst König. Unter alle beginnen spät des Benutzerkonto Wald Tisch Anwendungsfall Zusammenarbeit Wahrheit am Bearbeitung Fußgängerübergang. Recht Naturwissenschaft schön speichern Herz, Sonne Jäger Geisteswissenschaft Zugriffsberechtigung.
Arbeit eine kalt schwer warten lesen den fragen liegen ein an Tür Datenschutzeinstellungen schon. Fahren dort Arbeitsgemeinschaft Versandkosten bleiben oder trotzdem Bahnhofsvorplatz hier. Suchergebnisse leer sagen der Ansprechpartner Bearbeitungszeit beenden. Wieder es Vogel gehen Sache Blatt Wind alt.
Himmel beginnen Hund langsam grün, Angst Anwendung Einstellungen Mutter Jahr. Geisteswissenschaft Verfügbarkeit Frühling voll Frau Verwaltungsaufgabe Berg, rufen unmöglich Naturwissenschaft. Arbeiten man Zahlungsbestätigung Schneider zu bleiben bleiben einfach. Neu Haus Lieferadresse vielleicht schwierig ihr Frucht kaufen Monat durch, gut Wirtschaftsprüfung.
02
Стресс-тест длинным словом
Подставьте составное слово в контейнеры фиксированной ширины и посмотрите, на каком из них ломается раскладка. Ширины взяты типовые: кнопка, пункт меню, заголовок карточки, крошки.
Длина слова26
Кнопка · 150pxпомещается
Benutzerkontoeinstellungen
Пункт меню · 200pxпомещается
Benutzerkontoeinstellungen
Заголовок карточки · 260pxпомещается
Benutzerkontoeinstellungen
Хлебные крошки · 320pxпомещается
Benutzerkontoeinstellungen
Без атрибута языка правила переноса не подключаются: браузеру нечем разбить слово, и оно выходит за границу.
03
Строки худшего случая
Готовые к копированию строки, на которых немецкая вёрстка ломается первой.
Предельный случай составного слова: реальный закон, отменённый в 2013 году
Donaudampfschifffahrtsgesellschaftskapitän
41
Реалистичный предел для обычного текста
Kraftfahrzeug-Haftpflichtversicherung
37
Составное с дефисом: единственная точка, где браузер разорвёт слово сам
Benutzerkontoeinstellungen
26
Пункт меню, который не влезает в боковую панель
Einstellungen
13
Типовая кнопка: против английского Settings — плюс 62 %
Speichern
9
Кнопка действия: против английского Save — плюс 125 %
04
Что ломается
01
Составным словам негде переноситься
Браузер не знает, где разрывать «Benutzerkontoeinstellungen», и либо выпускает слово за границу контейнера, либо растягивает строку под него. Лечится `hyphens: auto` вместе с `lang="de"` — без атрибута языка словарь переносов не подключается, и свойство не делает ничего.
02
Кнопки под английский переполняются
«Save» в четыре знака превращается в «Speichern» в девять, «Settings» в восемь — в «Einstellungen» в тринадцать. Кнопка фиксированной ширины либо обрезает подпись, либо ломает раскладку соседей.
03
Прописная ß ведёт себя по-разному
До 2017 года при переводе в верхний регистр «ß» заменялась на «SS» и строка удлинялась на знак. Сейчас официально допустима «ẞ», но поддержка в шрифтах неполная, и `text-transform: uppercase` даёт разный результат в разных браузерах. Если в дизайне есть капслок, проверять надо именно этот случай.
04
Умляуты в верхнем регистре выше строчных
«ÄÖÜ» требуют места сверху. При плотном межстрочном интервале диакритика обрезается или сталкивается с предыдущей строкой — на английском тексте той же вёрстки этого не видно.
05
Таблицы расползаются сильнее всего
Колонка, рассчитанная по английскому содержимому, при немецком тянет за собой соседние: одно длинное слово задаёт минимальную ширину всей колонке, и таблица либо уезжает в горизонтальный скролл, либо сжимает остальные до нечитаемости.
Шрифты
Латиница с умляутами покрыта практически везде, специальных требований нет. Проблема не в покрытии, а в метриках: узкие гротески ухудшают читаемость длинных составных слов. Для интерфейса с немецким разумно закладывать на 10–15 % больше горизонтального пространства, а не уменьшать кегль.
05
Частые вопросы
Немецкий собирает составные существительные вместо нескольких слов: английское «user account settings» превращается в одно «Benutzerkontoeinstellungen». По интерфейсу средний рост — 30–35 %, но на коротких подписях он куда хуже: «Save» становится «Speichern», то есть плюс 125 % на самой частой кнопке продукта.
Сгенерируйте немецкий наполнитель того же объёма, что и настоящий текст, и подставьте самые длинные составные в самые узкие места: кнопки, пункты меню, заголовки таблиц, хлебные крошки. Контейнеры фиксированной ширины, рассчитанные по английскому, переполнятся первыми. Стресс-тест на этой странице подставляет слова возрастающей длины и показывает, где именно контейнер сдаётся.
Потому что переносу нужен объявленный язык. Само по себе `hyphens: auto` не делает ничего — браузеру нечем разбить слово, пока на элементе нет `lang="de"`. Это самая частая причина, по которой составные слова вылезают за границы контейнера, и проверяется она одним атрибутом.
Обычно называют «Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz» — 63 знака, это был реальный закон, отменённый в 2013 году. Случай предельный, но обиходный интерфейсный немецкий регулярно даёт слова в 25–40 знаков, и этого уже достаточно, чтобы сломать вёрстку, собранную под английский.
Исторически «ß» превращалась в «SS», и строка удлинялась на знак. С 2017 года официально допустима прописная «ẞ», но поддержка в шрифтах неполная, а `text-transform: uppercase` ведёт себя по-разному в разных браузерах. Если в дизайне есть подписи капслоком, этот случай надо проверить отдельно, а не считать, что он работает.
Нет. Слова собираются в браузере из встроенного словаря, обращения к сети не происходит. Страница работает без интернета после первой загрузки, и ни один сгенерированный фрагмент никуда не уходит.