Неотдавна ме поканиха да прочета вечерна лекция на тема CSS дизайн в Типографската общност в Австрия. За мен бе голяма чест да мина по стъпките на светила като Матю Картър, Вим Кроувъл, Маргарет Калвърт, Ерик Спикерман и покойната Фреда Сък.
Разясних някои от златните правила на интернет типографията, а след това, по време на частта за въпроси и отговори ме попитаха за текущата ситуация със сричкопренасянето в интернет. Това е един много добър въпрос, особено като се има предвид, че германският език е добре известен с дългите си съществителни. Например думата Verbesserungsvorschlag означава „предложение за подобрение“, а сричкопренасянето се използва в почти всички писмености.
В уеб пространството автоматичното сричкопренасяне се появи през 2011 година и към днешен ден е добре развито. Safari, Firefox и Internet Explorer 9 поддържат сричкопренасянето във всички операционни системи, а Chrome – в Android и MacOS, като засега няма поддръжка за Windows и Linux, но се очаква скоро да бъде въведена.
Как да включим автоматичното сричкопренасяне
Това става на две стъпки. Първата е да се зададе езика на текста. Това ще съобщи на браузъра кой точно речник да използва. За коректното пренасяне е необходим речник на пренасянията, съответстващ на езика на текста. Ако браузърът не знае езика на текста, то CSS документацията не препоръчва активирането на тази функция.
Сричкопренасянето е сложна тема. Местата на преноса обикновено се базират на сричките, използват се етимологични съчетания и фонология, но има и редица други правила.
Избор на език
Езикът на уеб страницата се задава с помощта на атрибута HTML lang:
Това е най-добрият начин за задаване езика на всички уеб страници, независимо дали в тях е включено сричкопренасянето или не е. Задаването на езика ще помогне на инструментите за автоматичен превод, на програмите за четене на текст и другите подобни помощни програми.
Атрибутът lang=“en“ прилага ISO езиков таг, който съобщава на браузъра, че текстът е на английски език. В този конкретен случай браузърът ще избере английския език по подразбиране и съответно, неговият морфологичен речник. Въпреки че британският и американският английски се различават, тази разлика не е така съществена като например, при португалския вариант. Проблемът се решава чрез добавянето на регион, за да може браузърът да се ориентира, кой вариант на английския е най-подходящ в сричкопренасянето. Така например, за да се зададе бразилски португалски или британски английски е необходимо следното:
Включване на сричкопренасянето
След задаването на езика, 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%; }Сричкопренасянето е идеалният пример за прогресивно подобряване. Тези свойства могат да бъдат активирани още сега, ако считате, че вашите уеб страници ще станат по-четими, а потребителите ще ги възприемат по-добре. А ако разработвате сайт с дълги, като в германския език думи, хората със сигурност ще ви бъдат благодарни.
