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

Статията е на Ричард Рътър (Richard Rutter), популярен специалист по цифров дизайн, който често говори по време на конференции и събития по целия свят. Основател е на компанията Clearleft, една от водещите консултантски компании в света в областта на дигиталния дизайн

2
701

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

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

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

Как да включим автоматичното сричкопренасяне

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

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

Избор на език

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

<html lang="en">

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

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

<html lang="pt-BR">
<html lang="en-GB">

Включване на сричкопренасянето

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

hyphens: auto;

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

-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Управление на сричкопренасянето

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

Ограничаване дължината на думата и броя символи до и след пренасянето

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

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

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

hyphenate-limit-chars: 6 3 2;

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

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

/* legacy properties */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;

/* current proposal */
-moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2;
hyphenate-limit-chars: 6 3 2;

Ограничаване броя на последователните пренасяния на срички

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

-ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;

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

Забрана за пренасяне на сричката в последния ред

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

hyphenate-limit-last: always;

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

Редуциране на сричкопренасянето чрез промяна размера на зоната

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

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

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

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

hyphenate-limit-zone: 8%

Всичкото на едно място

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

p {
   hyphens: auto;
   hyphenate-limit-chars: 6 3 3;
   hyphenate-limit-lines: 2;
   hyphenate-limit-last: always;
   hyphenate-limit-zone: 8%;
}

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

p {
   -webkit-hyphens: auto;
   -webkit-hyphenate-limit-before: 3;
   -webkit-hyphenate-limit-after: 3;
   -webkit-hyphenate-limit-chars: 6 3 3;
   -webkit-hyphenate-limit-lines: 2;
   -webkit-hyphenate-limit-last: always;
   -webkit-hyphenate-limit-zone: 8%;

   -moz-hyphens: auto;
   -moz-hyphenate-limit-chars: 6 3 3;
   -moz-hyphenate-limit-lines: 2;
   -moz-hyphenate-limit-last: always;
   -moz-hyphenate-limit-zone: 8%;

   -ms-hyphens: auto;
   -ms-hyphenate-limit-chars: 6 3 3;
   -ms-hyphenate-limit-lines: 2;
   -ms-hyphenate-limit-last: always;
   -ms-hyphenate-limit-zone: 8%;

   hyphens: auto;
   hyphenate-limit-chars: 6 3 3;
   hyphenate-limit-lines: 2;
   hyphenate-limit-last: always;
   hyphenate-limit-zone: 8%;
}

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

2
ДОБАВИ КОМЕНТАР

avatar
2 Коментари
0 Отговори на коментарите
2 Последователи
 
Коментарът с най-много реакции
Най-горещият коментар
  Абонирай се  
нови стари оценка
Извести ме за
Nikolay
Nikolay

Здравейте,

Поздравления за статията! Бих се радвал на повече такива 🙂

Поздрави,
Николай

Мартин
Мартин

В Kaldata защо няма сричкопринасяне?