Создание сайтов, поисковое продвижение, разработка веб-приложений.
+7 (917) 43-73-926
Email: feedback@goinweb.ru
ул. Новоженова 90/1, офис 419

Гипертекст появился очень давно: когда появились оглавления, указатели, сноски и отсылки к другим фрагментам печатного издания. Другое дело, что книга не выполняла за читающего его работу и не отсылала к нужному фрагменту сама: для этого читателю приходилось искать нужную страницу самостоятельно.(В современных книгах все происходит примерно так же: со времен Гутенберга и Федорова в этом отношении технологии книжного дела не ушли далеко вперед.) Под «быстрым гипертекстом» понимается такая отсылка к другим документам или другим фрагментам текущего документа, когда пользователь видит только текст ссылки, а адрес находится вне поля его видимости (обычно браузеры все же дают подсказки о том, по какому адресу ведут ссылки — с помощью статусной строки или всплывающих подсказок). При этом по ссылке достаточно щелкнуть, чтобы перейти по нужному адресу — поэтому в сочетании и фигурирует слово «быстрый». Кроме этого, текст на веб-страницах имеет еще три особенности, уже не такие существенные, но которые все же нельзя игнорировать.

poligraficheskoe-naslediya

Первая особенность связана с сущностью интернета и современным ритмом жизни. Если ценность фолианта не в последнюю очередь определяется количеством страниц в нем и объемом текста, то с веб-страницами как раз наоборот. Если страница не является аналогом бумажного издания, да еще раритетного, то чем короче на ней тексты, тем лучше. Дело в том, что восприятие информации при использовании электронных носителей информации существенно отличается от восприятия при использовании аналоговых. Это так называемый «синдром переключения каналов». Когда пульт в руке, очень легко переключаться с одного канала на другой. Когда достаточно щелкнуть по ссылке, очень легко покинуть один сайт и уйти на другой, потом на третий, а в конце просмотреть журнал посещений и ужаснуться, что вы уже на 124-м сайте за 17 минут. Психологически действует такой момент: если в течение нескольких секунд страница не заинтересовала посетителя, то он ее покинет. Вероятно, навсегда, потому что среди нескольких миллиардов веб-страниц всегда будет на чем остановиться. То же самое с телевизионными каналами (правда, их меньше). Отсюда простой вывод: страница должна чем-то привлечь посетителя, иначе зачем она вообще создавалась? Если не внешним видом, то содержимым, текстом. А в этом случае текстовые блоки должны быть лаконичными и понятными с первого прочтения. Понятность относительна (посетители всегда разные по степени подготовки), а вот правило лаконичности всегда должно соблюдаться. Длинные тексты на веб-страницах читать сложно, хотя бы в силу того, что с экрана читать сложнее, чем с бумаги. Лев Николаевич не выдержал бы натиска конкурентов, живи он в эпоху веб-дизайна. Вы думаете, почему японские хокку так популярны среди постоянных обитателей интернета? Потому что они короткие.

Вторая особенность текстов на веб-страницах связана с большим количеством разных параметров устройств вывода. Во-первых, у посетителей разные мониторы. Во-вторых, даже на двух мониторах одинакового размера может быть разное разрешение (сейчас популярны от 800 на 600 точек до 1280 на 1024 точки). В-третьих, даже на одном мониторе с зафиксированным разрешением посетитель может сильно уменьшить окно браузера либо, напротив, развернуть его на полный экран (F11). От всех этих условий очень сильно зависит вид текста. Один и тот же текст может выглядеть то как одна строчка, то как столбец в 10 строк. Во время одной сессии работы с веб-страницей пользователь может изменять окно браузера, отчего текст «ползет», особенно если он сверстан не в колонке жестко заданной ширины. Если на бумаге текст располагается раз и навсегда, то на веб-страницах он очень подвижный. Наконец, даже не изменяя окна браузера, посетитель может воспользоваться функциями увеличения и уменьшения размера текста (есть во всех браузерах) и масштаба отображения веб-страницы (есть во многих современных браузерах). Так что, если текст не «отлит» в виде изображения (так делают некоторые веб-дизайнеры), то он совершенно неподконтролен. Посетитель в большинстве случаев сможет сделать с ним, что хочет. А если сделать из текста изображение, то ведь у посетителя может быть отключена графика в браузере. Бедные, бедные верстальщики, связавшиеся с веб-дизайном! Они вынуждены только уповать на то, что текст сверстан так удачно, что посетитель сайта не захочет проводить все эти манипуляции.

Третья особенность текстов на веб-страницах связана с граниченностью средств форматирования, предоставляемых по умолчанию. Верстальщик-полиграфист использует богатый арсенал приемов и средств, нарабатывавшихся даже не годами, а веками. Он не зависит от многообразия устройств вывода, а просто верстает и спокойно готовит файлы к печати. Язык же HTML изначально разрабатывался скорее как разделяющий фрагменты текста логически, а не визуально. Это производители браузеров назначали тэгам визуальное оформление, чтобы заголовок внешне отличался от основного текста, а цитата — от образца кода. Следующие версии добавили разработчикам немного средств визуального форматирования: текст может быть полужирным, курсив-ным, подчеркнутым и перечеркнутым, раскрашенным в цвета радуги, крупным или мелким, сверстанным благодаря таблицам в несколько колонок; ссылкам можно стало назначать свои цвета. Семантическая ориентированность кода была непоправимо нарушена, но текст стал менее одноликим. Хорошие дизайнеры не злоупотребляли открывшимися возможностями, проявляя вкус, а плохие увечили вид текста и делали его совершенно нечитаемым. Пробираясь сквозь версии браузеров, на сцену вышел язык CSS: он дал намного больше средств форматирования текста, позволив почти не нарушать логику тэгов. Однако хорошая поддержка CSS есть только в современных браузерах, в старых она была реализована очень по-разному. С помощью средств CSS можно реализовать многие из полиграфических особенностей верстки: разные варианты кегля шрифта, стили подчеркивания, начертания, капители, разрядка текста (трекинг), интерлиньяж, разные отступы абзаца, в том числе и отступы красной строки (благодаря чему оформление абзацев можно максимально приблизить к книжному), буквица, разные типы выключки (влево, вправо, от центра, по ширине) и.т.п. Не во всех браузерах это работает одинаково хорошо, но к последним версиям тексты можно верстать уже очень красиво, почти не затрагивая HTML. Однако ряд параметров текста остается за пределами правил HTML и CSS. Среди них:

1. Нестандартные типы выключки: по ширине с последней строкой, выключенной от центра или вправо (обычно при выключке, или выравнивании, по ширине последняя строка абзаца оказывается такой, как если бы она была выключена влево) и по формату (когда все строки выключены одинаково по ширине).

2. Нормальное выравнивание по ширине. Проблема в том, что при такой выключке между словами образуются не очень красивые пробелы разной ширины — переносов ведь нет, и нечему корректировать внешний вид абзаца.

3. Переносы. Их можно реализовать на веб-страницах, но это, во-первых, связано с ручной работой (расстановка спецсимволов — мягких переносов, о которых пойдет речь в следующей главе), а во-вторых, переносы даже в этом случае не будут работать в браузерах на основе Gecko и в Konqueror (браузер Safari, хотя и построен тоже на KHTML, отображает такие символы корректно: только в концах строк, причем сами символы переносов выносятся за правую вертикальную линию набора). Расставлять переносы можно также сценариями: пример такого сценария будет приведен в следующей главе.

4. Висячая пунктуация. Реализуется несколькими способами с помощью тэгов HTML и средств CSS, позволяет выносить за вер-тикальную линию набора целые символы или просто визуально выравнивать вертикальную линию набора.

5. Кавычки и тире. С клавиатуры без дополнительных средств или сочетаний клавиш нельзя ввести правильные виды кавычек (вместо них употребляют знаки дюйма) и тире (вместо которого — дефис). Для полиграфических верстальщиков это никогда не было проблемой, для веб-верстальщиков часто этот факт почему-то встает непреодолимой стеной. В итоге правила для кавычек и тире в книгах одни, а на сайтах другие. То же можно сказать и о других спецсимволах. (Какие же они «спец-», если присутствуют в стандартных наборах символов большинства гарнитур?)

6. Кернинг пар. В основном таблицы шрифтов выглядят достаточно корректно, но в отдельных фрагментах текста то и дело хочется то сдвинуть поближе две буквы, то наоборот, сделать разрядку. Увы, без помощи и стилевых указаний это не реализовать, а с дополнительными тэгами возрастает объем файлов.

7. Вертикальный текст и текст, повернутый на 90 градусов. С помощью фильтров в Internet Explorer это реализовать можно, но этот браузер — не единственный.

8. Автоматически повторяющийся текст. В программах верстки обычно это делается на страницах шаблонов, но в веб-дизайне такого понятия нет. Текст можно включать в стилевые описания параметром content в псевдоэлементах :before и :after, но это, в свою очередь, не будет работать в Internet Explorer. На помощь приходят серверные сценарии.

9. Колонки. Даже если использовать таблицы либо соседствующие блоки, то разбивка на колонки производится вручную. Штатных средств разбивки текста на равномерные колонки в языках разметки нет. Могут выручить только сценарии на стороне сервера или клиента, которые считают количество символов или слов и разбивают текст на относительно равномерные колонки: они должны быть выровнены не только по ширине, но и по высоте. Дело осложняется еще больше, если дизайнер решил сделать колонки разной ширины (например, 1 узкая и 2 широких).

10. Тонкие пробелы — они нужны для разделения знака и номера параграфа, числа и знака процента и промилле и других подобных случаев. В этом случае пробел не разделяет, а скорее объединяет. Спецсимволы для тонких пробелов (которые к тому же являются неразрывными) есть, но они не поддерживаются браузерами. Для отображения таких пробелов можно использовать , которому стилями назначен меньший кегль и меньшее значение трекинга (пробел окажется меньше по размеру, что нам и нужно), но, так как даже неразрывный пробел, оформленный тэгами  , перестает связывать соседние слова, всю конструкцию с тонким пробелом посреди
нужно оформлять еще тэгами … — неоправданное увеличение объема кода.

11. Обтекание текстом непрямоугольных объектов отсутствует в браузерах. Даже если вставляется изображение в форматах GIF или PNG с прозрачными областями по краям, то обтекание текстом происходит по условной прямоугольной границе по периметру изображения. Реализовать можно только версткой вручную наложением частей текста на изображение — относительное или абсолютное позиционирование. Как видно, часть этих недостатков в браузерах можно компенсировать обходными средствами, что, правда, нарушает идеологию языков разметки и раздувает объем кода. Производители браузеров улучшают поддержку специальных символов, но этот процесс идет неравномерно и в разных браузерах по-разному. Например, в Opera 6 не отображался русский знак номера ¹ — вместо него просто появлялся пустой прямоугольник. Уже в седьмой версии ошибка была исправлена. Мягкие переносы не отображаются в браузерах на основе Gecko и в Konqueror. Несмотря на то, что в Firefox включен модуль проверки орфографии в формах, алгоритма расстановки переносов там так и не появилось. Сомнительно также, чтобы в ближайшем будущем появилась поддержка тонких пробелов, колонок и визуального выравнивания вертикальной линии набора. Колонки — разговор особый. На веб-страницах они в полном понимании этого слова появляются очень редко. Это связано с тем, что текст на веб-страницах, как уже говорилось, весьма подвижный, так что такое ручное формирование соседних столбцов текста, чтобы при изменении размера страницы или кегля шрифта текст все равно оставался выровнен по верхнему и нижнему краям, достаточно сложно. В программах верстки при изменении размера колонок или кегля шрифта текст автоматически перетекает из колонки в колонку, пока не будет достигнуто выравнивание. Колонки отсутствуют в спецификациях CSS, а производители браузеров двигаются с сторону стандартов, закрывая глаза на бедность возможностей оформления текста на страницах, поэтому в ближайших версиях ожидать такого новшества не приходится. Тут есть еще один момент. Страница печатного издания всегда перед глазами, и двигаться по колонкам текста нетрудно. (Некоторые проблемы возникают, когда полоса газеты — большого формата, например, А2, а текст сверстан на всю высоту полосы.) Особенность веб-страниц в том, что они могут быть любой высоты. Посетитель страницы, прочитав одну колонку, должен будет промотать страницу вверх и снова начать чтение, вместо того, чтобы читать текст последовательно. Поэтому колонки на веб-страницах применяются в основном для независимых блоков текста: в одной колонке средства навигации, в другой основной текст, в третьей дополнительная информация, и.т.п.

Однако множество других параметров, присущих оформлению текста в хороших печатных изданиях, можно реализовать на веб-страницах. Ниже приводится краткий обзор принципов оформления текста. Если сравнивать понятия верстки веб-страниц с полиграфической версткой, то окажется, что три основных тэга для фрагментов текста имеют прямые соответствия в верстке печатных изданий. Тэг
соответствует любому текстовому блоку на странице (в разных программах верстки они обычно называются фреймами и блоками текста), при этом он может объединять сколько угодно абзацев. Тэг соответствует абзацу. Тэг соответствует отрезку текста, меньшему, чем абзац. Первые два элемента являются блочными (block), третий — линейным (inline). Все три тэга не имеют семантики, они нужны для физического разделения текста.

Комментарии  

#19801 Betty 20.05.2024 05:56
Feel free to surf to my blog: sex in my area (littleyaksa.yo dev.net: http://littleyaksa.yodev.net/bbs/board.php?bo_table=free&wr_id=3938318)
#19802 Joie 20.05.2024 06:16
Also visit my homepage; sex on facebook (Hispanic-Omnib us.com: http://Hispanic-Omnibus.com/__media__/js/netsoltrademark.php?d=maps.google.com.pa%2Furl%3Fq%3Dhttps%3A%2F%2Fwww.facebookofsex.yaforia.com%2F)
#19803 Hazel 20.05.2024 06:16
Take a look at my webpage - facebook of sex: http://ellisislandboxoffice.us/__media__/js/netsoltrademark.php?d=Images.Google.bi%2Furl%3Fq%3Dhttps%3A%2F%2Fwww.facebookofsex.yaforia.com%2F
#19804 Leslee 20.05.2024 06:20
Review my web-site; safest poker sites (http://apbt.online-pedigrees.com/modules.php?name=Your_Account&op=userinfo&username=Hellen64P: http://apbt.online-pedigrees.com/modules.php?name=Your_Account&op=userinfo&username=Hellen64P)
#19805 Mose 20.05.2024 06:21
Feel free to surf to my blog online slots: http://en.easypanme.com/board/bbs/board.php?bo_table=business&wr_id=1748064
#19806 Nannie 20.05.2024 06:25
Every little thing is accessed anonymously through the Mega Dice Telegram Sportsbook & Casino Bot.


Here is my web page - 토토사이트 검증: https://mtrodm.Blogspot.com/2023/12/blog-post_16.html
#19807 Karolyn 20.05.2024 06:32
You've made some really good points there.
I looked on the internet to find out more about the issue and found most individuals will
go along with your views on this web site. darkmarket link: https://onoindarknetlinks.com https://onoindarknetlinks.com
#19808 Lynda 20.05.2024 06:36
Also visit my web site ... 33Poker.Net: http://s.e.as.ona.ls.ejd@@@@e.xped.it.io.n.eg@@@@@@/info.php?a%5B%5D=%3Ca+href%3Dhttp%3A%2F%2Fdavinciinitiative.net%2F__media__%2Fjs%2Fnetsoltrademark.php%3Fd%3D33Poker.net%252Fkkpoker-review%252F%3Ekkpoker+rakeback%3C%2Fa%3E%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttp%3A%2F%2Flaluzhotel.com%2F__media__%2Fjs%2Fnetsoltrademark.php%3Fd%3D33Poker.net%252Fkkpoker-review%252F+%2F%3E
#19809 Hazel 20.05.2024 06:40
My site - local hookups near me (Dominick: http://paragonoutletpartnersllc.org/__media__/js/netsoltrademark.php?d=liuxf.com)
#19810 Emory 20.05.2024 06:42
My web site :: Kk Poker
Review: http:///phpinfo.php?a%5B%5D=%3Ca+href%3Dhttp%3A%2F%2Famigophysicaltherapy.com%2F__media__%2Fjs%2Fnetsoltrademark.php%3Fd%3D33poker.net%252Fkkpoker-review%252F%3Ekkpoker+Rakeback%3C%2Fa%3E%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttp%3A%2F%2Fappbanc.com%2F__media__%2Fjs%2Fnetsoltrademark.php%3Fd%3D33Poker.net%252Fkkpoker-review%252F+%2F%3E
#19811 Mariel 20.05.2024 07:00
Feel free to visit my web page hookups near
me (pineoys.a: http:///phpinfo/?a%5B%5D=%3Ca+href%3Dhttps%3A%2F%2F98e.fun%2Fspace-uid-7545281.html%3Efacebook+of+sex%3C%2Fa%3E%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttp%3A%2F%2FBuyminder.com%2F__media__%2Fjs%2Fnetsoltrademark.php%3Fd%3Dliuxf.com+%2F%3E)
#19812 Randell 20.05.2024 07:02
Here is my web page; craiglistforsex : http://ehostingpoint.com/info.php?a%5B%5D=%3Ca+href%3Dhttp%3A%2F%2Faustinremodern.com%2F__media__%2Fjs%2Fnetsoltrademark.php%3Fd%3Dwww.facebookofsex.Yaforia.com%3Ecraiglistforsex%3C%2Fa%3E%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttp%3A%2F%2FDullaart.com%2F__media__%2Fjs%2Fnetsoltrademark.php%3Fd%3Dwww.facebookofsex.yaforia.com+%2F%3E
#19813 Shirleen 20.05.2024 07:42
Here is my blog: craiglistforsex (qsemag.co: http://qsemag.co/__media__/js/netsoltrademark.php?d=images.google.com.np%2Furl%3Fq%3Dhttps%3A%2F%2Fwww.facebookofsex.yaforia.com%2F)
#19814 Jocelyn 20.05.2024 07:44
Look at my web site :: sex on facebook: http://myvillageoffice.com/__media__/js/netsoltrademark.php?d=images.google.bj%2Furl%3Fq%3Dhttps%3A%2F%2Fwww.facebookofsex.yaforia.com%2F
#19815 Chadwick 20.05.2024 07:47
Also visit my website free
sex partner near me: http://covadbroadband.com/__media__/js/netsoltrademark.php?d=Www.Facebookofsex.yaforia.com
#19816 Hassan 20.05.2024 08:02
My page :: facebook sex site: http://aaaeastcentral.com/__media__/js/netsoltrademark.php?d=www.Facebookofsex.yaforia.com
#19817 Dani 20.05.2024 08:03
Hello there! This is my first comment here so I just wanted to give a quick shout out and
tell you I genuinely enjoy reading your posts.
Can you suggest any other blogs/websites/ forums that cover the same topics?

Thank you! dark web markets: https://darkmarketlist.info https://darkmarketlist.info
#19818 Bernadette 20.05.2024 08:05
Here is my web blog: safest poker sites (Danuta: https://www.kmds.or.kr/bbs/link.html?code=notice_etc&number=480&url=https://33poker.net)
#19819 Adele 20.05.2024 08:05
Appreciate this post. Will try it out. dark web
market list: https://darkmarketlist.info https://darkmarketlist.info
#19820 Corine 20.05.2024 08:20
Hmm it seems like your website ate my first comment (it was super long) so I guess I'll just sum it up what I had
written and say, I'm thoroughly enjoying your blog.
I too am an aspiring blog writer but I'm still new to the whole thing.
Do you have any suggestions for rookie blog writers?
I'd genuinely appreciate it.

Feel free to visit my blog post: canadian pharmacies: https://gswera.livejournal.com/385.html
#19821 Edgar 20.05.2024 08:22
Also visit my blog post - sex in my area: http://barnesandjonesllc.com/__media__/js/netsoltrademark.php?d=images.google.tg%2Furl%3Fq%3Dhttps%3A%2F%2Fwww.facebookofsex.yaforia.com%2F
#19822 Albertina 20.05.2024 08:23
Also visit my site; facebookofsex (: http:///phpinfo/?a%5B%5D=%3Ca+href%3Dhttps%3A%2F%2Fimages.google.tg%2Furl%3Fq%3Dhttps%3A%2F%2Fwww.facebookofsex.yaforia.com%2F%3Esex+On+facebook%3C%2Fa%3E%3Cmeta+http-equiv%3Drefresh+content%3D0%3Burl%3Dhttps%3A%2F%2FImages.google.ci%2Furl%3Fq%3Dhttps%3A%2F%2Fwww.facebookofsex.yaforia.com%2F+%2F%3E)
#19823 Malinda 20.05.2024 08:27
my web blog: top ten poker sites: http://www.jusarangchurch.com/?document_srl=6608751
#19824 Travis 20.05.2024 08:30
my blog ... online poker ranking: https://L1.prodbx.com/go/?l=88-16523-aHR0cHM6Ly8zM1Bva2VyLm5ldC8

Добавить комментарий

Защитный код
Обновить

Бесплатная консультация

Вам нужен сайт, но вы не знаете с чего начать? Оставьте ваши имя и телефон, мы перезвоним и бесплатно проконсультируем Вас.

Бесплатная консультация по телефону:

+7 917 4373926
Ежедневно c 10:00ч до 20:00ч.

 

Услуги | Портфолио | Блог | РБ
Перепечатка информации с сайта www.goinweb.ru, возможна только с указанием активной гиперссылки.
Веб-студия «GOINWEB»: Разработка, продвижение, обслуживание и поддержка веб-сайтов. E-mail:feedback@goinweb.ru
Яндекс.Метрика