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

[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% и про то, что положение кавычки может переместиться с середины строки в ее начало.

[s0rr0w]

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

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

На рассказах весь мир не сошелся ведь, правда?

Если мне нужно что-то прочитать, то я буду читать там, где быстрее всего найду. Качество оформления меня будут волновать в самую последнюю очередь. От него смысл рассказа не меняется ведь!

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

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

[solovets-denis]

Рад, что два человека сделали две страницы комментов. Не рад, что не по теме.

Маленькая ремарка от автора:

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

2. Призыв задуматься, как часто пользователь обращает внимание на оформление текстовой информации, по крайней мере странный: я обращаю внимание всегда. Мне сложно читать кусок, написанный 24pt Импактом вперемешку с каким-нибудь декоративным шрифтом а-ля Comic Sans MS. Уверен, вам тоже.

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

rash, все те сложности, которые ты встречаешь в оформлении текстов, я готов решить с помощью CSS.Все эти выносы в 20% от высоты текста я напишу без проблем. Меня волнует простой вопрос: как при помощи скрипта поставить перед нужным мне символом свой кусок кода, чтобы не набирать его руками.

Т.е. как перед « или Q вставить <span id ="id_name"> </span>

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

Я хорошо знаю css и html, но ничерта не смыслю в скриптах, если они уже не готовы и не разжованны в ридми, поэтому и прошу вашей помощи.

З.Ы. Если вы используете MODx, с удовольствием поделюсь рецептом встраивания автоматического типографа в админку.

Edited February 23, 2009 by solovets-denis

[s0rr0w]

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

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

2. Призыв задуматься, как часто пользователь обращает внимание на оформление текстовой информации, по крайней мере странный: я обращаю внимание всегда. Мне сложно читать кусок, написанный 24pt Импактом вперемешку с каким-нибудь декоративным шрифтом а-ля Comic Sans MS. Уверен, вам тоже.

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

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

Зачем их реализовывать в вебе? Найдите реальные цифры реальных исследований важности типографики.

[Gamer]

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

2. Призыв задуматься, как часто пользователь обращает внимание на оформление текстовой информации, по крайней мере странный: я обращаю внимание всегда. Мне сложно читать кусок, написанный 24pt Импактом вперемешку с каким-нибудь декоративным шрифтом а-ля Comic Sans MS. Уверен, вам тоже.

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

+1

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

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

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

А еще лучше, если аффторы будут богатый смыслом текст нормально оформлять.

Зачем их реализовывать в вебе?

Гм. Скажите, пожалуйста, а зачем вы пробелы ставите, знаки препинания?

[s0rr0w]

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

Вообще-то интернет придумали в Европе тоже.

А еще лучше, если аффторы будут богатый смыслом текст нормально оформлять.

А зачем?

Гм. Скажите, пожалуйста, а зачем вы пробелы ставите, знаки препинания?

Первое и второе - для скорочтения.

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

[rash]

А зачем?

Вы серьезно не понимаете, что даже если вам это безразлично, то мне больше нравится читать грамотно написанные и гамотно оформленные тексты. Зачем тогда вообще грамотно писать?

А ваши призывы найти цифры важны реально только вам. Мне глубоко плевать на цифры. Я вижу, как это обстоит для меня. Цифры меня беспокоят меньше всего.

[Gamer]

А зачем?

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

На такой сайт читатель больше не зайдет. Зато там, где понимают важность красивого и удобного текста на одного юзера станет больше.

[s0rr0w]

Вы серьезно не понимаете, что даже если вам это безразлично, то мне больше нравится читать грамотно написанные и гамотно оформленные тексты. Зачем тогда вообще грамотно писать?

А ваши призывы найти цифры важны реально только вам. Мне глубоко плевать на цифры. Я вижу, как это обстоит для меня. Цифры меня беспокоят меньше всего.

Я где-то спорил против грамотности написания?

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

Почему вы требуете тогда от других того, чего сами делать не сильно горите желанием?

Цифры - это способ измерить эффект полезности типографики в вебе. Это адекватный способ разрешить спор. Но, ни один из оппонентов не смог внятно объяснить, почему длинное тире читается на вебе лучше чем минус.

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

На такой сайт читатель больше не зайдет. Зато там, где понимают важность красивого и удобного текста на одного юзера станет больше.

Зачем передергивать? Я где-то говорил про полезность синих букв в 30 пикселей на кислотно-желтом фоне? Или отрицал где-то важность знаков препинания?

Или у вас аргументы закончились?

[Vlad]

Спор у вас уже необъективный пошел, поэтому добавлю свое мнение по поводу типографики.

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

Вся эта преамбула была к тому, что спорить о том, что важно: оформление или содержание бесполезно. Конечно, имеет значение и то и другое, но для каждого человека на первый план выходит что-то одно. Что конкретно - зависит от человека. Поэтому lib.ru, где только голый текст, и пользуется успехом. Да и будет пользоваться дальше. Как, впрочем, и сайты с соблюдением всех правил типографики.

Теперь о типографике. Думаю, все согласятся, что печатные тексты в книгах, буклетах и др. надо оформлять должным образом. Веб-типографика же (тексты на сайтах) пока находится в зачаточном состоянии. Напрямую переносить типографику в веб и глупо и нерационально, вот и получается что переносят частично, по своему разумению. Где-то подобный перенос получается удачным, где-то вызывает усмешку, а в некоторых случаях и просто недоумение.

Главная проблема веб-типографики - это постоянный поиск оптимального сочетания между сложностью и красотой. Скажем, чтобы в простом текстовом редакторе сделать кавычки-елочки, придется везде набирать «. Это неудобно и отвлекает от написания текста. С другой стороны, те, кто пользуются Вордом, вставляют такие кавычки буквально одной кнопкой. Тоже и с тире дело обстоит. А вот со всякими шпациями и висячей пунктуацией совсем плохо.

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

[rash]

Раскладка Бирмана помогает легко и быстро вводить основные символы, требующиеся в хорошо оттипографленом тексте и отсутствующие на клавиатуре.

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

[Vlad]

Вот на этом сайте можно подготовить текст для сайта. Только <nobr> это конечно не кошерно уже.

http://www.typograf.ru/

[s0rr0w]

Теперь о типографике. Думаю, все согласятся, что печатные тексты в книгах, буклетах и др. надо оформлять должным образом. Веб-типографика же (тексты на сайтах) пока находится в зачаточном состоянии. Напрямую переносить типографику в веб и глупо и нерационально, вот и получается что переносят частично, по своему разумению. Где-то подобный перенос получается удачным, где-то вызывает усмешку, а в некоторых случаях и просто недоумение.

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

Главная проблема веб-типографики - это постоянный поиск оптимального сочетания между сложностью и красотой. Скажем, чтобы в простом текстовом редакторе сделать кавычки-елочки, придется везде набирать «. Это неудобно и отвлекает от написания текста. С другой стороны, те, кто пользуются Вордом, вставляют такие кавычки буквально одной кнопкой. Тоже и с тире дело обстоит. А вот со всякими шпациями и висячей пунктуацией совсем плохо.

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

Веб - высокодинамичная отрасль, где новость может устареть, пока ее будет набирать оператор. Бизнес диктует простые правила: чем быстрее новость попадет на страницу, тем лучше; чем проще код, тем лучше.

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

Влад, начни с себя. Я всем повторяю одно и то же. Пиши все свои тексты с типографическими правилами, используй все, что ты перечислил, ведь людям будет проще читать (сомнительный довод правда...)!

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

[Gamer]

Я где-то говорил про полезность синих букв в 30 пикселей на кислотно-желтом фоне? Или отрицал где-то важность знаков препинания?

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

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

Не в том направлении смотрите. Совершенно неважно, что человек читает, книгу или интернет сайт, если все это он воспринимает одним и тем же органом - глазами. А значит, нюансы восприятия неизменны.

Веб - высокодинамичная отрасль, где новость может устареть, пока ее будет набирать оператор. Бизнес диктует простые правила: чем быстрее новость попадет на страницу, тем лучше; чем проще код, тем лучше.

И? Быстро набирать грамотный и красивый текст вполне реально.

"Игнорирование" правил типографики получилось не потому, что их специально игнорируют, а потому что важность их на вебе стремится к нулю.

Это не важность, а грамотность стремится к нулю.

[Vlad]

Не соглашусь, что веб-типографика оказалась за бортом. У печатной типографики несколько сотен лет истории и опыта, веб же сформировался можно сказать тока-тока. Естественно, веб-типографика еще в пеленках ходит, и толком люди еще не поняли, что и как с ней делать. Однако уже сформировались свои правила (кавычки, тире), которые и просто исполнять и придают тексту профессионализм.

Еще раз повторю, в Ворде соблюдать некоторые правила, связанные с неразделяемым пробелом, тире и кавычками легко. К тому же и орфографию заодно проверяем. Так что довод - чем быстрее напишем, тем лучше, не катит. Чем быстрее и правильнее напишем - вот еще лучше.

[s0rr0w]

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

Где я такое говорил?

Не в том направлении смотрите. Совершенно неважно, что человек читает, книгу или интернет сайт, если все это он воспринимает одним и тем же органом - глазами. А значит, нюансы восприятия неизменны.

Сколько людей на этом форуме ставят длинное тире вместо минуса, а кто «елочки» вместо "дюймов"? Вы же все это глазами воспринимаете!

И? Быстро набирать грамотный и красивый текст вполне реально.

НАБИРАЙТЕ!

Это не важность, а грамотность стремится к нулю.

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

Не соглашусь, что веб-типографика оказалась за бортом. У печатной типографики несколько сотен лет истории и опыта, веб же сформировался можно сказать тока-тока. Естественно, веб-типографика еще в пеленках ходит, и толком люди еще не поняли, что и как с ней делать. Однако уже сформировались свои правила (кавычки, тире), которые и просто исполнять и придают тексту профессионализм.

Влад, давай ты начнешь с себя, ведь это так просто выполнять, а?

Так что довод - чем быстрее напишем, тем лучше, не катит. Чем быстрее и правильнее напишем - вот еще лучше.

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

[Vlad]

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

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

[s0rr0w]

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

А распространяется ли данное утверждение на Windows?

BBC не заморачивается с типографикой. Ведущее английское новостное агенство.