Типографика контента по Ководству Лебедева

[solovets-denis]

Уверен, что многие дизайнеры и верстальщики знают два приведенных ниже правила:

1. В оформлении русского текста кавычки должны выглядеть как «елочки».

2. Эти самые кавычки должны выносится за границу текста.

Вполне подробно и ясно эти правила для Рунета были озвучены Артемием Лебедевым еще в 2004 и 2005 годах соответственно (см. параграфы Ководства «Кавычки» и «Висячая пунктуация»).

Для простоты реализации этого принципа я пользуюсь следующим куском CSS:

Q {quotes: '«' '»' '"' '"';
behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '«' + this.innerHTML + '»') : '');}

Теперь любой текст, заключенный в тэг Q, будет браться в кавычки "елочками".

Осталось научить эти кавычки выноситься за границу текста:

Q {quotes: '«' '»' '"' '"';
behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '«' + this.innerHTML + '»') : '');
margin-left: -8px;}

#in {
margin-right: 8px;
}

Этот код хорош тем, что он вынесет кавычку за левую границе текста, если кавычка будет первым символом в строке.

А плох он тем, что код, когда кавычка не первая в строке, выглядит так:

Слово не <span id="in"> </span><q>воробей</q>

Если не брать пробел в id in, то кавычки залезут на предыдущее слово.

Вопрос: как написать скрипт, который будет брать пробел перед тэгом Q в айдишник in?

Особо ретивое примечание: прежде, чем спрашивать, зачем в примере <span id="in"> </span><q>воробей</q> пробел берется в айдишник, вспомните про верстку в 100% и про то, что положение кавычки может переместиться с середины строки в ее начало.

[rash]

Не заморачивались бы вы с выносом кавычек в тексте.

Это и у Лебедева-то выглядит премерзко, на сайте сразу видно.

Во-первых, такого понятия, как висячая пунктуация, вообще нет. Есть оптическая выключка, которая немного похожа на висячую пунктуацию, только в отличие от нее делает текс более красивым. При этом символы с малым весом свешиваются на 10—25%, не больше, чтобы визуально край текста был ровным. Реализовываь это в вебе — никому не нужная трата времени и сил.

Полностью выносить кавычки за линию набра имеет смысл всего в нескольких случаях, один из которых — заголовки, а другие встречаются крайне редко. Во всех этих случаях достаточно отрицательного text-indent’а.

Даже на бумаге полное свешивание имеет смысл преимущественно в акциденции, просто для хорошей верстки должна применяться оптическая выключка, а свешивание символов ее только испортит.

[yopopt]

solovets-denis, прислушайтесь к совета rash'a.

[s0rr0w]

Раскрою вам страшную тайну, типографику Лебедевские лемминги придумали для того, чтобы оправдывать нереально раздутые бюджеты проектов. Типографикой занимаются сторонние люди, не работники компании, за мизерную плату.

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

Задайтесь себе вопросом, вы сильно замечаете, какого качества текст вы читаете?

[rash]

Да, я действительно замечаю, какого качества текст я читаю. Знаки пунктуации должны быть расставлены правильные. Этого достаточно, чтобы текст выглядел опрятно, красиво и грамотно (при отсутствии ошибок, конечно).

А вот свешивание символов за линию набора — это лишнее, тем более что длина свеса сильно зависит от используемого шрифта, и вообще правила свешивания намного сложнее, чем описанные в ководстве, и на вебе их реализовать практически невозможно.

Для хорошего оформления текста на вебе достаточно правильно расставленных тире, дефисов и кавычек, а также неразрывных пробелов. Неправильно свешенные символы могут испортить текст.

[s0rr0w]

Да, я действительно замечаю, какого качества текст я читаю. Знаки пунктуации должны быть расставлены правильные. Этого достаточно, чтобы текст выглядел опрятно, красиво и грамотно (при отсутствии ошибок, конечно).

А вот свешивание символов за линию набора — это лишнее, тем более что длина свеса сильно зависит от используемого шрифта, и вообще правила свешивания намного сложнее, чем описанные в ководстве, и на вебе их реализовать практически невозможно.

Для хорошего оформления текста на вебе достаточно правильно расставленных тире, дефисов и кавычек, а также неразрывных пробелов. Неправильно свешенные символы могут испортить текст.

Если вы такой требовательный к качеству типографики человек, то почему напечатали свое сообщение без вставки неразрывных пробелов, правильно расставленных кавычек и других прибамбасов?

[rash]

В моем сообщении кавычек нет, стоит длинное тире, а неразрывный пробел на том компьютере, с которого набиралось сообщение, ставить неудобно, но в ближайшее время это будет исправлено. Настроим :-)

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

[s0rr0w]

В моем сообщении кавычек нет, стоит длинное тире, а неразрывный пробел на том компьютере, с которого набиралось сообщение, ставить неудобно, но в ближайшее время это будет исправлено. Настроим :-)

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

И не забывайте правильно абзацы расставлять. А пока вы будете заняты "делом", я напишу десяток ответов, в котором не будет ничего из перечисленного, но их будет 10.

[rash]

Видите ли, ввод правильного символа занимает у меня ровно столько же времени, сколько и ввод неправильного, ну или максимум на 20% больше. На 10 ответов это вам времени не даст :-)

Глупый вообще спор получается — писать красивые тексты или некрасивые. В комментариях, в принципе, все равно, а при подготовке статьи можно даже целых 3 минуты пожертвовать на типографику :-) Зато читать ощутимо приятнее, а ведь это и нужно — чтобы читали.

[s0rr0w]

Видите ли, ввод правильного символа занимает у меня ровно столько же времени, сколько и ввод неправильного, ну или максимум на 20% больше. На 10 ответов это вам времени не даст :-)

Глупый вообще спор получается — писать красивые тексты или некрасивые. В комментариях, в принципе, все равно, а при подготовке статьи можно даже целых 3 минуты пожертвовать на типографику :-) Зато читать ощутимо приятнее, а ведь это и нужно — чтобы читали.

Вы же понимаете, что "ощутимо приятнее" не измеряется в численных значениях, и носит характер "ментального".

Я могу сказать, что банка кока-колы ощутимо приятнее чем банка пепси-колы. И доказать данное утверждение вы не сможете, впрочем, как и я.

У меня есть к вам хороший вопрос, почему никто кроме рунета не заморачивается с типографикой?

[rash]

А на этот хороший вопрос есть один хороший ответ — а они заморачиваются. Просто меньше говорят об этом, и больше делают. Особенно не очень крупные ресурсы.

А насчет ментального — я не знаю ни одного человека, которому читать ежедневную газету было бы приятнее чем читать хорошо оформленную книгу.

[rash]

Вот попробую сформулировать требования к хорошо оформленному тексту в интернете. Это — достаточные требования, большее, как правило, будет излишним. Для оформления текста на бумаге требований больше.

Итак, в хорошо оформленных текстах необходимо использование:

— кавычек, принятых в языке издания;

— тире, принятого в языке издания;

— тире, минуса и дефиса по назначению;

— неразрывных пробелов перед тире в середине предложения, между инициалами и фамилией, между числом и единицами измерения;

— пустой строки для разделения абзацев;

Естественно, это не спасет желтый текст на красном фоне, выровненный по формату, с интерлиньяжем 110%.

[s0rr0w]

Вот попробую сформулировать требования к хорошо оформленному тексту в интернете. Это — достаточные требования, большее, как правило, будет излишним. Для оформления текста на бумаге требований больше.

Итак, в хорошо оформленных текстах необходимо использование:

...

А теперь главный вопрос, каков эффект от всего того, что вы назвали? Не надо только оперировать некими сущностями, которые трудно выразить в числовом эквиваленте.

[rash]

А не все вообще выражается в числовом эквиваленте.

Ну ладно, читается на 30% легче и на 12% приятнее, информация усваивается на 17% лучше.

Зачем делать красивые интерфейсы? Зачем делать удобные интерфейсы? Их эффективность числами не измеришь.

вообще у людей с чисто техническим складом ума есть серьезный недостаток — они считают, что все вокруг рационально. Это большая ошибка. Эстетика — фактор субъективный, но работающий.

[s0rr0w]

А не все вообще выражается в числовом эквиваленте.

Ну ладно, читается на 30% легче

Откуда цифры? Кто замерял?

и на 12% приятнее, информация усваивается на 17% лучше.

Про приятнее промолчу, так как приятность вообще измерить нельзя, а вот про 17% снова вопрос, откуда информация?

Зачем делать красивые интерфейсы? Зачем делать удобные интерфейсы? Их эффективность числами не измеришь.

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

Удобство интерфейса легко измеряется временными показателями, скорость принятия решения и кратчайший срок достижения цели.

вообще у людей с чисто техническим складом ума есть серьезный недостаток — они считают, что все вокруг рационально. Это большая ошибка. Эстетика — фактор субъективный, но работающий.

Я работал и дизайнером в том числе.

Еще один простой пример - длинное тире увеличивает расстояние между словами, затрудняя тем самым чтение строки, а не упрощая чтение. Многи правила полиграфии работают только для полиграфии, в эру интернета их актуальность теряется, так как разный подход к методам подачи информации.

[rash]

Если вы работали дизайнером, то должны понимать, что ни принцип золотого сечения ни принцип сочетания цветов сами по себе ничего не значат, они не спасут плохой дизайн или интерфейс.

Красивость, естественно, также понятие субъективное, но она влияет на важный аспект восприятия пользователем — удовлетворение от пользования прогаммой, сайтом, любым интерфейсом в принципе. На основании такого субъективного момента многие пользователи делают выбор между разными программами.

То, что правила полиграфии действуют только для полиграфии — так разве я с этим спорю? Я их и не включил в список требований к текстам для интернета.

Ачтокасаетсятире-такэтовообщеабсурд,потомучтопробелытожеувеличиваютрасстояниемеждусловами,ноприэт

омпочемутонезамедляютинезатрудняютчтение.

[s0rr0w]

Если вы работали дизайнером, то должны понимать, что ни принцип золотого сечения ни принцип сочетания цветов сами по себе ничего не значат, они не спасут плохой дизайн или интерфейс.

Красивость, естественно, также понятие субъективное, но она влияет на важный аспект восприятия пользователем — удовлетворение от пользования прогаммой, сайтом, любым интерфейсом в принципе. На основании такого субъективного момента многие пользователи делают выбор между разными программами.

Я всегда думал, что программы выбирают по функциональности...

То, что правила полиграфии действуют только для полиграфии — так разве я с этим спорю? Я их и не включил в список требований к текстам для интернета.

Ачтокасаетсятире-такэтовообщеабсурд,потомучтопробелытожеувеличиваютрасстояниемеждусловами,ноприэт

омпочемутонезамедляютинезатрудняютчтение.

В древние времена именно так и писали во всех книгах, и особо не парились. Пробелы улучшают восприятие, именно поэтому они прижились до сих пор.

А вот длинное тире использовалось в полиграфии не зря, потому что там есть жесткие рамки, как то страница A4 и выровненный по двум сторонам текст. Там нужно было создавать визуальные зацепки, чтобы улучшать читабельность. Интернет имеет немного другие исходные данные, поэтому правила типографии тут являются рудиментарными. Подтверждено отсутствием на клавиатуре длинного тире. На печатных машинках, к слову, они еще были.

[rash]

Я всегда думал, что программы выбирают по функциональности...

А среди сходных по функциональности программ выбирают по интерфейсу, и не в последнюю очередь — по его эстетичности и удовлетворению от использования.

Интернет имеет немного другие исходные данные, поэтому правила типографии тут являются рудиментарными. Подтверждено отсутствием на клавиатуре длинного тире. На печатных машинках, к слову, они еще были.

Те правила, которые являются рудиментарными для текстов, предназначеных для чтения с монитора и публикации в интернете, никто и не требует соблюдать. В таких текстах не нужно окружать тире укороченными пробелами, использовать красные строки и выключку по формату, например. А также делать оптическую выключку.

А то, что на клавиатуре нет длинного тире, — это ни о чем не говорит. На ней нет многих нужных символов. Или испанцы теперь должны отказаться от символов ¡ и ¿, немцы — от ä, ü и ß, ведь их нет на клавиатуре? А в русском запятая набирается в верхнем регистре. Это говорит о том, что клавиатура вообще появилась тогда, когда использование компьютера в полиграфии даже не предполагалось.

А клавиатуры пишущих машинок спроектированы лучше.

[s0rr0w]

А среди сходных по функциональности программ выбирают по интерфейсу, и не в последнюю очередь — по его эстетичности и удовлетворению от использования.

Лично мне наплевать на красивости, я прагматик, я люблю работать а не интерфейсы рассматривать.

А то, что на клавиатуре нет длинного тире, — это ни о чем не говорит. На ней нет многих нужных символов. Или испанцы теперь должны отказаться от символов ¡ и ¿, немцы — от ä, ü и ß, ведь их нет на клавиатуре? А в русском запятая набирается в верхнем регистре. Это говорит о том, что клавиатура вообще появилась тогда, когда использование компьютера в полиграфии даже не предполагалось.

А клавиатуры пишущих машинок спроектированы лучше.

В немецких пишущих машинках были эти буквы, в русских были русские... И на клавиатурах они есть. У чехов вообще 49 букв, и ничего, работают люди.

[rash]

Лично мне наплевать на красивости, я прагматик, я люблю работать а не интерфейсы рассматривать.

В том-то и дело, что вы судите обо всех по себе.

Я среди двух программ с одинаковыми возможностями и одинаково удобными интерфейсами выберу ту, которая красивее, если ни в чем другом она конкуренту не уступает.

[s0rr0w]

В том-то и дело, что вы судите обо всех по себе.

Я среди двух программ с одинаковыми возможностями и одинаково удобными интерфейсами выберу ту, которая красивее, если ни в чем другом она конкуренту не уступает.

Ваши слова противоречат нынешнему положению дел на рынке программ.

Если все выбирают по внешнему виду, то почему мы имеем более 80% виндовс систем, а не мак. Мак ведь красивее!

Почему люди пользуются оперой или фаерфоксом, ИЕ7 ведь красивее!

[rash]

Вы, вероятно, меня не совсем правильно поняли.

«Если ни в чем конкуренту не уступает» — в это понятие входит и цена (это относительно маков), и удобство (это относительно IE7).

IE7 ничуть не красивее (и уж точно намного неудобнее), и довести его интерфейс до приемлемого состояния штатными настройками мне не удалось.

Кстати, IE7 занимает гораздо большую часть рынка, чем опера и мозилла, если вы считаете его интерфейс более красивым, то можете считать это подтверждением моих слов.

[s0rr0w]

Вы, вероятно, меня не совсем правильно поняли.

«Если ни в чем конкуренту не уступает» — в это понятие входит и цена (это относительно маков), и удобство (это относительно IE7).

О, теперь уже и цена играет роль. Мы так скоро придем к тому, что на решение пользователя влиет лунный календарь

Давайте вернемся к контексту разговора, а именно - типографике.

Кстати, IE7 занимает гораздо большую часть рынка, чем опера и мозилла, если вы считаете его интерфейс более красивым, то можете считать это подтверждением моих слов.

И это не мешает мне пользоваться более удобными программами, например FF.

Давайте вернемся к хорошему вопросу, откуда вы цифры набрали? То, что вы хотите, чтобы это было так, на самом деле таковым не является.

Опять же, хороший вопрос, на английских раскладках в печатных машинках длинное тире присутствует. Но ведущие новостные сайты используют знак минуса. Почему никто не заботится о столь замечательном знаке как длинное тире? Почему эта "проблема" существует только в русском языке?

[rash]

О, теперь уже и цена играет роль. Мы так скоро придем к тому, что на решение пользователя влиет лунный календарь

Давайте вернемся к контексту разговора, а именно - типографике.

Цена играла роль с самого начала, я где-то утверждал обратное?

Возвращаясь к типографике, из двух текстов на разных сайтах я читаю более аккуратно и грамотно оформленный. Иногда даже специально искал другие сайты, потому что неаккуратно оформленный текст тяжело читается. За примером далеко ходить не надо: lib.ru

Давайте вернемся к хорошему вопросу, откуда вы цифры набрали? То, что вы хотите, чтобы это было так, на самом деле таковым не является.

Вы просили привести конкретные цифры, прекрасно понимая, что их нет. Я привел, прекрасно понимая, что их невозможно проверить. Попробуйте их опровергнуть ;-)

Опять же, хороший вопрос, на английских раскладках в печатных машинках длинное тире присутствует. Но ведущие новостные сайты используют знак минуса. Почему никто не заботится о столь замечательном знаке как длинное тире? Почему эта "проблема" существует только в русском языке?

Ведущие новостные сайты — это какие?

Вы должны прекрасно понимать, что если так поступает большинство — это совершенно не значит, что так правильно.

Те англоязычные сайты, которые я читаю, такой халатности себе, как правило, не позволяют.

[s0rr0w]

Возвращаясь к типографике, из двух текстов на разных сайтах я читаю более аккуратно и грамотно оформленный. Иногда даже специально искал другие сайты, потому что неаккуратно оформленный текст тяжело читается. За примером далеко ходить не надо: lib.ru

А я читаю тот, который наиболее полно отражает тот смысл, который я хочу прочитать в данном тексте. Мне нужна суть информации, а не оформление.

Вы просили привести конкретные цифры, прекрасно понимая, что их нет. Я привел, прекрасно понимая, что их невозможно проверить. Попробуйте их опровергнуть ;-)

Не я их приводил и не мне их опровергать

Ведущие новостные сайты — это какие?

http://news.bbc.co.uk/ - не используют длинного тире

http://www.cbsnews.com/ - не используют

http://www.msnbc.msn.com/ - где используют длинное тире, где два минуса, где минус.

Yahoo использует

AOL не во всех статьях

Вы должны прекрасно понимать, что если так поступает большинство — это совершенно не значит, что так правильно.

Те англоязычные сайты, которые я читаю, такой халатности себе, как правило, не позволяют.

Если долго делать неправильно, то это может стать правильным. Примеров в истории тому масса.

[rash]

Допустим, есть два места, где можно почитать рассказы Довлатова в онлайне.

Один из них — lib.ru, а на другом они оформлены грамотно. Естественно, я буду читать на втором. Хотя по-вашему, возможно, на первом текст более полно отражает тот смысл, который вы хотите в нем найти.

А насчет того, что если делать неправильно, то это станет правильным... Ну и что? Равняться-то на это зачем?