Всичко, което трябва да се знае за сричкопренасянето в CSS

Неотдавна ме поканиха да прочета вечерна лекция на тема CSS дизайн в Типографската общност в Австрия. За мен бе голяма чест да мина по стъпките на светила като Матю Картър, Вим Кроувъл, Маргарет Калвърт, Ерик Спикерман и покойната Фреда Сък.

Разясних някои от златните правила на интернет типографията, а след това, по време на частта за въпроси и отговори ме попитаха за текущата ситуация със сричкопренасянето в интернет. Това е един много добър въпрос, особено като се има предвид, че германският език е добре известен с дългите си съществителни. Например думата Verbesserungsvorschlag означава „предложение за подобрение“, а сричкопренасянето се използва в почти всички писмености.

В уеб пространството автоматичното сричкопренасяне се появи през 2011 година и към днешен ден е добре развито. Safari, Firefox и Internet Explorer 9 поддържат сричкопренасянето във всички операционни системи, а Chrome – в Android и MacOS, като засега няма поддръжка за Windows и Linux, но се очаква скоро да бъде въведена.

Това става на две стъпки. Първата е да се зададе езика на текста. Това ще съобщи на браузъра кой точно речник да използва. За коректното пренасяне е необходим речник на пренасянията, съответстващ на езика на текста. Ако браузърът не знае езика на текста, то CSS документацията не препоръчва активирането на тази функция.

Сричкопренасянето е сложна тема. Местата на преноса обикновено се базират на сричките, използват се етимологични съчетания и фонология, но има и редица други правила.

Езикът на уеб страницата се задава с помощта на атрибута HTML lang:

Това е най-добрият начин за задаване езика на всички уеб страници, независимо дали в тях е включено сричкопренасянето или не е. Задаването на езика ще помогне на инструментите за автоматичен превод, на програмите за четене на текст и другите подобни помощни програми.

Атрибутът lang=“en“ прилага ISO езиков таг, който съобщава на браузъра, че текстът е на английски език. В този конкретен случай браузърът ще избере английския език по подразбиране и съответно, неговият морфологичен речник. Въпреки че британският и американският английски се различават, тази разлика не е така съществена като например, при португалския вариант. Проблемът се решава чрез добавянето на регион, за да може браузърът да се ориентира, кой вариант на английския е най-подходящ в сричкопренасянето. Така например, за да се зададе бразилски португалски или британски английски е необходимо следното:

След задаването на езика, CSS сричкопренасянето може да бъде включено. Това е съвсем лесно:

Към днешен ден Safari и IE/Edge изискват поставянето на префикси и трябва да се въведе следното:

Съвсем недостатъчно е само включването на тази функция в CSS. В спецификациите CSS Text Module Level 4 се появи възможност за управление на преносите, с помощта на които по различни начини могат да се задават начините и броя на пренесените срички в текста.

Ако има твърде много пренасяния на срички, става по-трудно четенето на изречения. Пренесените къси думи отвличат вниманието. Общоприетото емпирично правило е, че трябва да се пренасят само думите с дължина над 6 символа, като преди пренасянето трябва да останат най-малко три символа и не по-малко от два символа на следващия ред.

В ръководството на Оксфорд за стиловете се препоръчва минимум три букви след пренасянето. Допускат се съвсем редки изключения.

Описаните дотук правила се задават с помощта на свойството hyphenate-limit-chars. То приема три значения, разделени с интервали. Трите числа задават минималния брой на символите за цялата дума, минималния брой символи до и след пренасянето. За да има съответствие с описаното по-горе емпирично правило, трябва да се зададе

По подразбиране и трите параметъра имат значение auto. Това означава, че браузърът автоматично ще избере най-добрите настройки за избрания език. CSS Text Module Level 4 предлага по подразбиране да се използват значенията 5 2 2, но според мен, те водят до излишни пренасяния на сричките. Ако текстът на екрана на смартфона е станал неприятен, тези параметри лесно могат да се променят.

Засега това свойство се поддържа само от IE/Edge (с използването на префикси), а Safari ограничава броя на символите чрез остарялото свойство на предишния CSS3 Text Module стандарт. Еднаквият ефект на сричкопренасяне в Edge и Safari (съвсем скоро и във Firefox) може да стане с помощта на следния код:

От чисто естетични съображения е възможно да бъдат ограничени броя поредни редове с пренесени срички. Последователните редове с тиренца жаргонно се наричат „стълба“. Общото емпирично правило за английския език в този случай е, че идеалният максимум са два последователни реда с пренесени срички. Но в германския език например, тези „стълби“ са по-дълги. Максималният брой на тези редове може да се зададе чрез свойството hyphenate-limit-lines. Засега това се поддържа само от IE/Edge и Safari:

Това ограничение може да бъде снето с помощта на командата no-limit.

По подразбиране браузърът спокойно пренася последната дума от абзаца и в този случай пренесената сричка стои самотно в целия ред, а това не е естетично. По-добре е малко по-голям интервал в края на предпоследния ред, отколкото половин дума в последния. Това се задава чрез свойството hyphenate-limit-last със значение always:

Засега това свойство се поддържа само от IE/Edge

По подразбиране, пренасянето се осъществява максимално често, в пределите на зададените hyphenate-limit-chars и hyphenate-limit-lines. Но дори и с тези ограничения, текстът може да се окаже наситен с тирета отдясно.

Да разгледаме един абзац, изравнен отляво. Дясната страна е неравна, което частично се оправя чрез пренос на думите. По подразбиране ще бъдат пренесени всички думи, за които е разрешено пренасянето, осигуряващо максимално изравняване отдясно, без големи интервали в средата на текста. Но ако можете да се примирите с малко неравен от дясната страна текст, то броят на пренасянията може да бъде намален.

За тази цел е необходимо да се укажат допустимия брой интервали между последната дума от реда до края на текстовото поле. Ако в това пространство започва нова дума, то тя няма да се пренася. Това пространство е известно като „зоната на сричкопренасянето“. Колкото е по-голяма тази зона, толкова по-неравен отдясно става текстът, а броят на пренасянията (и на тиретата) намалява. Чрез регулирането на тази зона е възможно да се намери оптималното съотношение между броя на тиретата и броя на интервалите и съответно, празните места в текста.

Тази зона се регулира с помощта на свойството hyphenation-limit-zone, на което се задава размера в пиксели или съответния процент спрямо ширината на текстовото поле. В съвременния адаптивен дизайн има смисъл от използването на проценти. Това означава, че зоната на сричкопренасянето ще бъде по-малка на екраните с малък размер, което ще доведе до повече пренасяния и по-малко незапълнени редове. И обратното, на по-широки екрани зоната на пренасянето ще се разшири и следователно, ще има по-малко преноси и повече незапълнени редове, но при големите дисплеи този текст е по-лесен за възприемане. Дизайнерите най-често избират 8%:

С помощта на CSS Text Module Level 4 свойствата ще зададем същите параметри за управление на сричкопренасянето, каквито се използват и в програмите за дизайн на уеб страниците:

А със съответните префикси кодът изглежда по следния начин:

Сричкопренасянето е идеалният пример за прогресивно подобряване. Тези свойства могат да бъдат активирани още сега, ако считате, че вашите уеб страници ще станат по-четими, а потребителите ще ги възприемат по-добре. А ако разработвате сайт с дълги, като в германския език думи, хората със сигурност ще ви бъдат благодарни.