Comments 96
Будете смеяться, но забыл статью в черновиках. Тем не менее, лучше поздно, чем никогда. :)
Статья хорошая
Освежил память
А картинок в ней нет — у меня ни одной не отображается.
Освежил память
А картинок в ней нет — у меня ни одной не отображается.
Коллега, есть несколько неточностей.
1. «Машинная кавычка» « не используется для обозначения дюймов. Для этого есть специальный знак «двойной штрих» (см. habrahabr.ru/blogs/typography/25531/).
2. «Bold-, italic- и smallcaps-» лучше перевести как «полужирное, курсивное начертания и капитель».
3. «Верхний и нижний регистр» называются «прописные» и «строчные». И режимом «все прописные» лучше не пользоваться вообще, потому что это почти не удобочитаемо (кроме крупных кеглей в коротких заголовка).
1. «Машинная кавычка» « не используется для обозначения дюймов. Для этого есть специальный знак «двойной штрих» (см. habrahabr.ru/blogs/typography/25531/).
2. «Bold-, italic- и smallcaps-» лучше перевести как «полужирное, курсивное начертания и капитель».
3. «Верхний и нижний регистр» называются «прописные» и «строчные». И режимом «все прописные» лучше не пользоваться вообще, потому что это почти не удобочитаемо (кроме крупных кеглей в коротких заголовка).
Картинок нет ;(
Есть спорные моменты. Особенно насчет border-bottom у ссылок.
Вот насчет border-bottom однозначно с вами согласен.
В русском и украинском языках это вообще менее актуально, т.к. в нашей кириллице за опорную линию текста выступают только «р», «у», «ф». Незначительно выступают «д», «ц» и «щ», но от этого они не становятся менее узнаваемыми.
В английском же языке выступают «g», «j», «p», «q», «y». Будучи перечеркнутыми снизу, они становятся похожи на «o», «i»,«o»,«o»,«v» соответственно. В русском языке подобное происходит только с буквой «р» и то в зависимости от длины палочки…
В английском же языке выступают «g», «j», «p», «q», «y». Будучи перечеркнутыми снизу, они становятся похожи на «o», «i»,«o»,«o»,«v» соответственно. В русском языке подобное происходит только с буквой «р» и то в зависимости от длины палочки…
а я полностью согласен с 7, жалко что я сам до такого раньше не додумался
a {
display: block;
border-bottom: 1px solid;
}
Покажет, что этого делать не нужно
display: block;
border-bottom: 1px solid;
}
Покажет, что этого делать не нужно
картинок действительно нет
Чтобы появились картинки — я зашел на оригинал — там картинки открылись, и сразу подгрузились и в окно хабра (в опере проканало). Наслаждаюсь :)
картинки ограничены реферерами с SM, гугл-ридера и ещё каких-то рсс-радостей, так что придется вам их перезалить ;)
Приношу свои извинения. Видимо действительно существует ограничение на картинки, которые у меня подгружались из кэша. Перевёл их на другой хостинг и теперь должны быть видны.
Кстати, если кто может порекомендовать правильный и бесплатный хостинг для таких картинок, то тому моя благодарность. Плюс ещё что-нибудь переведу. ;)
Мне нравиться Яндес фото. Но тут выбор просто огромен, каждый использует то, что ему по душе. А вообще, было бы интересно еще услышать варианты.
funkyimg.com/
например
например
Да, а почему вы HTML-мнемоники вроде — заменили на альт-коды при переводе?
Типографы — рулят, помогают исправить 50% этих вот ошибок.
Да можно и без картинок, понятно все и так. Спасибо за науку — символ троеточия раннее я считал анахронизмом…
Тёма так и считает — tema.livejournal.com/107311.html
> Придуман он для моноширинного набора и экономии байтов, однако пользоваться им для верстки книг, а также газет и журналов — нельзя.
конкретно в той статье он даже не упоминает про необходимость употребления/неупотребления для веб, речь идет о бумажной типографике
конкретно в той статье он даже не упоминает про необходимость употребления/неупотребления для веб, речь идет о бумажной типографике
Он про полиграфию.
Тёма не придумывает стандарты.
Дайте линк на стандарты и тех кто их придумывает, пожалуйста.
Типографика идёт к нам с древних времен, когда текста набирались вручную из шаблонов букв и патом выплавлялись свинцовые пластины с текстом. Печатная машинка из-за своей ограничености очень сильно покаверкала правила типографики, типа двойные пробелы, два минуса и прочие.
А про тему скажу, что он заядлый любитель типографики и прочитал не одну книгу посвященую ей. Но правила типографики придумывал не он :))))
А про тему скажу, что он заядлый любитель типографики и прочитал не одну книгу посвященую ей. Но правила типографики придумывал не он :))))
Первый и самый главный — учебник русского языка из школьного курса.
Второе — неуловимые ГОСТы, найти которые в интернете маловероятно. Но эти стандарты обсуждают очень много аспектов.
Третий — этот блог. Чем отличается от «Ководтсва» и прочих Лебедевских высказываниях? А тем, что пишется не одним человеком, и комментируется в большинстве своем профессионалами.
Второе — неуловимые ГОСТы, найти которые в интернете маловероятно. Но эти стандарты обсуждают очень много аспектов.
Третий — этот блог. Чем отличается от «Ководтсва» и прочих Лебедевских высказываниях? А тем, что пишется не одним человеком, и комментируется в большинстве своем профессионалами.
У Темы все сперли…
Спасибо за замечательный перевод. Просто приятно читать. Только имхо в картинках тут необходимости нет, т. к. все примеры текстовые, а посему их можно было бы оформить лишь с помощью текста и разметки.
Согласен со всем кроме 2-x пунктов.
7. Ссылки. Мне кажется более верно было бы уменьшать количество текста, который является ссылкой до минимума, нежели изменение text-decoration на border-bottom. И уж в любом случае это не смертный грех :)
10. Uppercase. Этот пункт вообще к типографике никакого отношения не имеет, это уже скорее семантика
7. Ссылки. Мне кажется более верно было бы уменьшать количество текста, который является ссылкой до минимума, нежели изменение text-decoration на border-bottom. И уж в любом случае это не смертный грех :)
10. Uppercase. Этот пункт вообще к типографике никакого отношения не имеет, это уже скорее семантика
UFO just landed and posted this here
Это все описано и сказано уже миллион раз. Сколько можно писать топики «n ошибок программиста, дизйнера etc»
Действительно, есть спорные моменты.
1. Двойной дефис на месте тире — это всё-таки лучше, чем одинарный.
2. Многоточие тремя точками не вызывает никаких проблем, особенно в русской типографской традиции, в которой точки многоточия расположены близко одна к другой. В английском тексте, быть может, этот совет имеет смысл.
4. Длинный пробел в конце предложения в русских текстах никогда и не ставился.
7. Очень спорно. На мой взгляд, нормальное подчёркивание выглядит лучше.
1. Двойной дефис на месте тире — это всё-таки лучше, чем одинарный.
2. Многоточие тремя точками не вызывает никаких проблем, особенно в русской типографской традиции, в которой точки многоточия расположены близко одна к другой. В английском тексте, быть может, этот совет имеет смысл.
4. Длинный пробел в конце предложения в русских текстах никогда и не ставился.
7. Очень спорно. На мой взгляд, нормальное подчёркивание выглядит лучше.
В памяти есть нечёткие воспоминания про различие в поведении «& mdash;» и «Alt+0151» (в пользу мнемоники) — кто что помнит на эту тему?
Что-то такое припоминается… По-моему в некоторых кодировках просто не отобразятся нормально (или не сохранятся) все эти дополнительные символы. Ведь ascii-таблица состоит из 256 символов, причем 0-127 это US, а остальное национальная кодировка, поэтому куча всяких левых символов туда просто не влезает. А мнемоники состоят из нормальных ascii-characters и поэтому спокойно преобразуются в нестандартные символы браузером, в редакторах конечно такое не покатит.
Небольшой пиар utf-8: в нем вроде бы никаких проблем с этим нет ;)
Небольшой пиар utf-8: в нем вроде бы никаких проблем с этим нет ;)
UFO just landed and posted this here
P.S. и раз уж пишем о типографике, то никак не «шрифт» а гарнитура кажется, нет?
Есть также использование x вместо × (times). А вообще согдашусь с другими комментаторами – уже сотню раз про это слышал. Есть аналогичные темы поинтересней – когда будет карма, напишу.
остается только выложить таблицу всех «нужных» символов…
Насчет многоточия: а как же лебедевское «тук тук тук»?..
habrahabr.ru/blogs/typography/36654/#comment_961692
у «тук тук тук» он обозначил область применения — не веб
у «тук тук тук» он обозначил область применения — не веб
Странно что в статье нет упоминания про использование nbsp; В книге Кирсканова про это было много написано!
Довольно тонкий момент с кавычками… „Надо помнить что в русском языке кавычки открываются снизу, а закрываются сверху” (патриотично выглядит).
Довольно тонкий момент с кавычками… „Надо помнить что в русском языке кавычки открываются снизу, а закрываются сверху” (патриотично выглядит).
Насколько знаю, что такие кавычки имеют право на существование, но, субъективно, глазу приятнее такие: «».
Мне почему-то казалось, что обычно в печатных изданиях принято использовать «ёлочки», а такие кавычки используются на письме…
У вас последняя кавычка неверная ;) мнемоническое правило такое: 9966, а у вас 9999. habrahabr.ru/blogs/typography/36654/#comment_962180 тов. 4eese поставил верные.
Для маководов, вдруг кому-то пригодится:
— em-dash (alt+0151) — Option + Shift + — — многоточие (alt+0133) — Option +;
— кавычки («») — Option + \, Option + Shift + \
— копирайт — Option + G
— registered — Option + R
Хотя, наверное, маководы это и так знают…
— em-dash (alt+0151) — Option + Shift + — — многоточие (alt+0133) — Option +;
— кавычки («») — Option + \, Option + Shift + \
— копирайт — Option + G
— registered — Option + R
Хотя, наверное, маководы это и так знают…
Парсер, как-бы, лох — первые две строчки читать вот так:
— em-dash (alt+0151) — Option + Shift + - — многоточие (alt+0133) — Option +;
Продолжая тему выложу свой набор спец. символов:
alt+0151 —
alt+0150 –
alt+0171 «
alt+0187 »
alt+0132 „
alt+0147 “
alt+0169 ©
alt+0149 •
alt+0183 ·
alt+0167 §
alt+0198 Æ
alt+0174 ®
alt+0153 ™
alt+0151 —
alt+0150 –
alt+0171 «
alt+0187 »
alt+0132 „
alt+0147 “
alt+0169 ©
alt+0149 •
alt+0183 ·
alt+0167 §
alt+0198 Æ
alt+0174 ®
alt+0153 ™
У меня ноутбук. Дополнительной цифровой клавиатуры нет, поэтому «Alt+0151» не работает. Как ставить тире?
Ммм… На ноутах вроде есть кнопочка Fn, которая активирует цифровую клавиатуру, которая в свою очередь, обычно, недалеко от Enter'a =) Возможно не на всех ноутбуках она есть, не уверен.
Клавиша Fn есть, а как она работает, чтобы включить цифровую клавиатуру — понять не могу. Буду сам разбиратсья дальше. Спасибо.
Сам ноутбука не имею, но вроде когда зажимаешь Fn активируются клавиши такого же цвета как и Fn, синии или зеленые, где как. То есть зажимаете альт+фн и набираете цифирки которые заменяют доп. клавиатуру.
Могу предложить свой способ, просто сохраняете этот список в быстро доступном месте, например быстрые заметки в опере и при надобности просто копируете символ и вставляете в нужное место.
Могу предложить свой способ, просто сохраняете этот список в быстро доступном месте, например быстрые заметки в опере и при надобности просто копируете символ и вставляете в нужное место.
Спасибо за перевод. Про символ многоточия не знал. Можно еще поспорить на счет 7-го пунткта (неправильное подчеркивание гипертекстовых ссылок), благо всё решается лишь заменой стилей.
p.s.
Стандарты кодирования не только для языков программирования существуют :)
p.s.
Стандарты кодирования не только для языков программирования существуют :)
Я извиняюсь, но всё это было описано до вас. В незабвенном Ководстве.
По любезно предоставленным горячим клавишам (alt+0151) я понял, что автор оригинала использует Windows и не осведомлён о существовании других ОС. :)
А приведённые «грехи» – это не самые грубые типичные ошибки начинающего верстальщика. Склоняюсь к мнению, что автор оригинала не так долго занимается версткой. Могу ошибаться.
А приведённые «грехи» – это не самые грубые типичные ошибки начинающего верстальщика. Склоняюсь к мнению, что автор оригинала не так долго занимается версткой. Могу ошибаться.
Все гениальное — просто ©
Отдельное спасибо за первые два пункта (и пятый)! А то как Чукча всё время копипейстил эти символы…
Кавычки-ёлочки:«так», Alt+0171 и Alt+0187
Кавычки-лапки:„так“, Alt+0132 и Alt+0147
Апостроф: д’артаньян, Alt+0146
Дефис:(<неразрывный _пробел>-), Alt+01
Тире:(<неразрывный _пробел>—), Alt+0151
Короткое тире, настоящий минус:(<неразрывный _пробел>–), Alt+0150
Многоточие:(…), Alt+0133
Параграф:(§), Alt+0167
Копирайт:(©), Alt+0169
Регистермарка:(®), Alt+0174
Торговая марка:(™), Alt+0153
Плюс/минус:(±), Alt+0177
Знак градуса:(°), Alt+0176
Точка:(·), Alt+0183
Жирная точка:(•), Alt+0149
Кавычки-лапки:„так“, Alt+0132 и Alt+0147
Апостроф: д’артаньян, Alt+0146
Дефис:(<неразрывный _пробел>-), Alt+01
Тире:(<неразрывный _пробел>—), Alt+0151
Короткое тире, настоящий минус:(<неразрывный _пробел>–), Alt+0150
Многоточие:(…), Alt+0133
Параграф:(§), Alt+0167
Копирайт:(©), Alt+0169
Регистермарка:(®), Alt+0174
Торговая марка:(™), Alt+0153
Плюс/минус:(±), Alt+0177
Знак градуса:(°), Alt+0176
Точка:(·), Alt+0183
Жирная точка:(•), Alt+0149
Дефис пробелом не отбивается, так как разделяет части одного слова, в отличие от тире, разделяющего слова друг от друга, являясь знаком пунктуации.
UFO just landed and posted this here
> Вы можете даже использовать исключительно заглавные буквы
Ну, лучше уж капитель. А вообще, говоря про выделение, Брингерст советует изменять не более одного параметра, пользоваться только одним средством (курсив, цвет, полужирное начертание) и в меру, вдумчиво.
Ну, лучше уж капитель. А вообще, говоря про выделение, Брингерст советует изменять не более одного параметра, пользоваться только одним средством (курсив, цвет, полужирное начертание) и в меру, вдумчиво.
Насколько я помню, достаточно только знака ©, либо слова Copyright. И то, и другое вместе — тоже сродни ошибке.
Я особенно раздражаюсь, когда не соблюдаются первые три пункта, а они не соблюдаются практически повсеместно (среди немногочисленных приятных исключений — Хабр и Википедия). Кстати, в Википедии есть полезный JS-инструмент под названием «Викификатор» — кроме исправления разметки, он исправляет и типографику…
только не бейте меня больно, но раз речь идет и о веб-типографике, то придется влезть с SEO запарами… а именно насчет многоточия…
всем известно, что точка разделяет пассажи слов в тексте… а вот будет ли поисковиками восприниматься символ многоточия как явный разделитель пассажей — вопрос…
по поводу подчеркивания ссылок — с точки зрения типографики может и правильнее, но с точки зрения фундаментальных основ CSS, валидности и проч. — огород еще тот…
всем известно, что точка разделяет пассажи слов в тексте… а вот будет ли поисковиками восприниматься символ многоточия как явный разделитель пассажей — вопрос…
по поводу подчеркивания ссылок — с точки зрения типографики может и правильнее, но с точки зрения фундаментальных основ CSS, валидности и проч. — огород еще тот…
Насчёт многоточия — момент спорный. Многие кричат «Даёшь троеточие!» — и кто же прав?
Да и это — далеко не всё из нынешних проблем…
Да и это — далеко не всё из нынешних проблем…
чудесная копия мыслей Лебедева…
на данный момент реально встречаю только неправильные кавыски (кстати, в разных языках правильными являются разные варианты), многоточие тремя точками (сам грешен...) и идиотизм с капсом.
что до подчеркивания — вопрос спорный.
что до подчеркивания — вопрос спорный.
Довольно странно говорить о типографике на русскоязычном ресурсе с примерами из английской. Конечно, большинство пунктов интернациональны, но те же кавычки режут глаз.
Абсолютно не поняла, о чём речь в первом пункте. Прерывание мысли с помощью em dash или «дефисоминуса» у нас одинаково не практикуется — только многоточие. Но и в английских книжках я как-то не видела, что оно использовалось с отбивкой пробелом и в середине фразы — или всё же имелось ввиду не прерывание мысли, а обычное тире?
Седьмой пункт семантически уродлив — хотя бы потому, что бордер не «ловит» цвет текста.
Абсолютно не поняла, о чём речь в первом пункте. Прерывание мысли с помощью em dash или «дефисоминуса» у нас одинаково не практикуется — только многоточие. Но и в английских книжках я как-то не видела, что оно использовалось с отбивкой пробелом и в середине фразы — или всё же имелось ввиду не прерывание мысли, а обычное тире?
Седьмой пункт семантически уродлив — хотя бы потому, что бордер не «ловит» цвет текста.
Так сперли все ПОЛНОСТЬЮ у Темы.
Ворюги блин. Копипастеры.
Ворюги блин. Копипастеры.
спасибо!
Пункты 1-5 — фигня полная, с этим справляются роботы. Более того, иногда требуют, чтобы тире были не спецсимволом, а именно двумя дефисами — чтобы потом верстальщики не мудохались с разными видами тире, самовольно вставленными автором. То же и с многоточиями.
Only those users with full accounts are able to leave comments. Log in, please.
Десять смертных грехов веб-типографики