Экранная типографика или как сделать сейлормуновский сайт лучшим в рунете

Пряник №4
Что такое экранная типографика
или
Как сделать сейлормуновский сайт лучшим в рунете

Сейчас я вам расскажу о том, чем страдает ВЕСЬ рунет (да и не только рунет). Эта проблема свойственна даже профессионалам. Даже тем, кто все тэги наизусть знают, свойственно делать то, о чём я сейчас расскажу. Но сначала я бы хотел порекомендовать всем вебмастерам сейлормуновских сайтов вооружиться до зубов. Если лунная диадема не помагает — берём что-нибудь помощнее, например, гранатомёт. Впрочем качественного HTML-редактора будет достаточно. Я бы рекомендовал Macromedia Dreamweaver MX. Не слушайте тех, кто говорит, что это сложная программа (не сложнее Word’а). Главное, не лезть в дебри, которыми всё равно никто не пользуется. Так что, дорогие читатели, доставайте 80 рублей (или же 549 € (евро) за лицензионную версию) и отправляйтесь на Савёловский рынок, где можно купить хорошую пиратскую копию.

Установили? Хорошо. А теперь читайте дальше. Оказывается, наши учителя русского языка держат нас в полном неведении. Какая тут связь? Сейчас объясню. Дело в том, что существуют кое-какие ВЕЩИ, которые авторы (вебмастеры) должны более-менее соблюдать. А именно:

Орфография (чтобы не написать „о“ вместо „ё“ в слове „шёл“)

Пунктуация (чтобы запятую перед союзом „а“ не пропустить)

Грамматика (чтобы „падежов“ не перепутать)

Для начала хватит :)

Но наши учителя нам НИ СЛОВА не сказали о ещё одной дисциплине (слово мне самому не нравится, но что делать). Именно эту штуку практически все вебмастеры в упор не видят. Можно сказать, что они в этом плане — неучи. Но мы-то не такие! Мы любим японскую анимацию, но при этом ценим и уважаем родной язык. Итак, эта штука называется „экранная типографика“. Вы меня спросите: „А чего это такое и на фиг это нужно?“ А я отвечу: „Нужно, чтобы показать, что мы, поклонники «Сейлормун» — не ламеры рунета“. О том, как подставлять правильные знаки, я расскажу после первой таблицы.

Распространённая ошибка

Неправильный пример

Правильный пример

Тире

Многие не знают, что тире примерно в три раза длиннее дефиса. Путать тире и дефис — то же самое, что путать знаки плюс (+) и минус (–).

Тире - это такая длинная черта.
А дефис—то короче.
2+2-1=3
В 2002-2003 годах...

Тире — это такая длинная черта.
(справа и слева от тире стоят пробелы)

А дефис-то короче.
2+2–1=3

В 2002—2003 годах… (здесь справа и слева от тире пробелы не ставятся)

Кавычки

В русском языке присутствуют два типа кавычек: «ёлочки» и „лапки“. Ёлочки пришли к нам из Франции, лапки, скорее всего, из Германии. Если текст идёт в печать, то первыми всегда идут ёлочки. Поэтому, если у нас на сайте есть «версия для распечатки», то нужно использовать ёлочки. А что делать, если нужно употребить цитату в цитате? Очень просто: кавычки должны не глотаться, а просто различаться между собой (см. пример). И, пожалуйста, не путайте кавычки со знаками дюйма "…". Знаки дюйма употребляются в исходных текстах программ или в кодах HTML, но никак не в тексте для читателя.

(Версия для распечатки)

Продавец в лавке с дисками сказал: "У нас в продаже есть мультсериал "Сейлормун"".

(Версия для распечатки)

Продавец в лавке с дисками сказал: «У нас в продаже есть мультсериал „Сейлормун“».

Спец-символы

Неправильные переносы

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

Сегодня холодно: –30 °С. Надо бы позвонить в газету по телефону (012)345–67–89. Надо рассказать им о рекорде температуры

Символы валют

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

Один диск стоит 10 $
А два диска стоят 500 руб.

Апостроф

С кавычками разобрались, теперь дело за апострофом. На самом деле апостроф — это одиночная закрывающая кавычка. Путать её со знаком минуты (') или знаком ударения (`) нельзя.

Инструкция
к Word'у

Инструкция
к Word’у

Тут что-то не так...

А здесь… всё верно!

Неправомерное опускание буквы „ё“

Какой-нибудь умный дядя из Российской академии наук скажет нам, что букву „ё“ опускать разрешается. Но я настоятельно рекомендую послать этого дядю куда подальше. Карамзин бы в гробу переверулся, если бы узнал, что мы так обращаемся с буквой „ё“. Прошу вас, пожалейте детей или иностранцев, которым приходится гадать между „ё“ и „е“. В немецком языке же никто и не думает „ä“ превращать в „a“. Zählen (считать) — это не zahlen (платить).

Ежик под зеленой елкой задумал аферу, сказав: „Кто смел, тот и смел“

Ёжик под зелёной ёлкой задумал аферу, сказав: „Кто смел, тот и смёл“

(В слове „афера“ буквы „ё“ никогда не было)

Вы спросите меня, как же нам стать грамотными, если мы не можем подставить такие простые вещи с клавиатуры (кроме буквы „ё“)? Действительно, при нажатии SHIFT + 2 мы получаем знаки дюйма, а два дефиса — это не тире. Если мы работаем в текстовом редакторе и пишем текст не для веба, то можно воспользоваться мгновенной вставкой символов. Опять-таки повезло тем, у кого есть Word. Вордяра „знает“ много правил и сам много чего поправляет, но если мы, например, хотим вставить кавычки в текст, например, в гостевой книге (не включая Word), то мы просто зажимаем левый Alt и при включённом Num Lock’е набираем 0171 и 0132 (см. таблицу ниже).

НО: Если мы делаем веб-страничку, то копировать символы из Word’a или же применять alt’овую вставку нельзя! Готов поспорить, что нас не поймут пользователи систем Linux и Macintosh. Вместо правильных символов у этих гостей будет тарабарщина. Что же делать? Ответ прост: нужно применять коды HTML. Вот тут очень повезло обладателям последнего Dreamweaver’а: кликнули мышкой, выбрали символ, готово! На всякий случай я напомню: в окошке „Insert“ есть вкладка „Characters“. Вон там-то и есть все вышеперечисленные символы плюс туча других (даже символ евро есть €). Те, кому приходится работать с французскими и немецкими веб-страничками, будут плясать от радости, ибо там есть ВСЕ немецкие умляуты и французские accent circonflexe и все типы ударений, которые будут корректно читаться даже (сюрприз!) в русской кодировке!!! Должен разочаровать любителей японского, ибо японских букв (именно букв, а не иероглифов как в китайском) в таблице Dreamweaver’а нет.
А теперь смотрите, как нужно правильно подставлять символы на веб-страничке и в текстовом редакторе:

Пример символа

Код HTML
(Те, у кого есть Dreamweaver, сейчас радуются — им нужно только пару раз мышкой кликнуть)

Как вставить символ в редактор Flash-MX, блокнот, Word, гостевую книгу, на форум, чат и т. д.

Неразрывный пробел нужен, чтобы избежать неправильных переносов.

У каждого текстового редактора по-своему

Наш телефон: 123–45–67

В телефонном номере пробелов нет, но переносить его как вздумается — нельзя

У каждого текстового редактора по-своему

короткое тире (минус)

русская открывающая кавычка (лапка)

русская закрывающая кавычка (лапка)

русская открывающая кавычка (ёлочка)

русская закрывающая кавычка (ёлочка)

знак иены (мы, любители аниме, должны такое знать)
:)

ALT + 0165
(работает не всегда — зависит от кодировки и шрифта)

CTRL + 2 или ALT + E
(работает не всегда — зависит от кодировки и шрифта)

многоточие

Сайт создан в системе uCoz