Текст абзаца.

Как известно, Хабр использует «олдскульные» атрибуты тегов, допускающие форматирование текста и рисунков в статьях и комментариях авторами. Среди таких тегов оказался один, отсутствующий в стандартах W3C. Это - . Обнаружилось, что часть авторов «наивно» пользуется этим атрибутом, потому что другого редактор Хабра просто не предоставляет. Как ни странно, в части браузеров этот атрибут на Хабре поддерживается, хотя эксперименты с чистыми тестовыми страницами показывают, что чудес нет, в img он не работает.

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

На самом деле, атрибут align=«center» в HTML предназначен для блочных элементов (div, p, ...) и относится не к ним самим, а к внутреннему содержанию элемента. Поэтому, если напишем

Но этого нельзя написать на Хабре, таковы правила парсера тегов.

Чтобы проверить, как это работает на Хабре, можно воспользоваться предпросмотром при написании комментария или в черновике статьи. Это не совсем точно будет совпадать с окончательным видом, но пользоваться для тестов можно.

В большинстве браузеров, кроме Firefox, вторая картинка центрируется (если стили Хабра ещё не исправили), хотя тесты показывают , что этот атрибут браузерами не поддерживается (кроме редких исключений с доктайпами).
Почему же этот неправильный текст не работает везде, но работает на Хабре, причём не в Firefox?

UPD 25 янв. 2013 (через год):

Посмотрев на стили рисунка, находим причину.
img { display: block; margin: 0 auto !important; }
Да, на Хабре в файле all.css поддерживается этот финт превращения неправильного атрибута в «правильный». Именно эти свойства нужно иметь рисунку, чтобы начать центрироваться - быть блоком и центрироваться стилем margin: 0 auto; .

(А ведь те, кто знает, что такого атрибута нет, не могут сами догадаться, что он работает на Хабре - документации нет, тест в Fx не проходит. Я, например, чисто случайно узнал о его существовании, увидев в заметках aleksandrIt (почти в каждой аннотации), посмотрев через Chrome.)

Осталось разобраться, почему центрирование не работает в Firefox.

Дело за малым - тоже посмотреть стили (с помощью Firebug). Здесь обнаруживаем, что атрибут чудесным образом изменился на align=«middle» и даже ручное переименование не помогает его исправить. Браузер сам меняет неправильный атрибут на, «по его мнению», наиболее подходящий (вертикальное выравнивание в потоке строчных элементов). Поэтому правило стилей img перестаёт работать.

Следовательно, для полной поддержки браузеров на Хабре не хватает правила:
img, img{ display: block; margin: 0 auto !important; }

Тест чистой страницы с атрибутами

Технические замечания. Ососбенный вид функции применения стилей addRules() вызвано желанием включить в исполнение скрипт в браузере IE8. (В IE9 не проверялось, но должно работать, как в остальных.) Без доктайпа в IE8 не будет работать правило margin: 0 auto, но заработают атрибуты align:right и left.

Что делать?

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

UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.

Как я и обещал ранее, в этом уроке вы узнаете как можно выровнять по горизонтали содержимое любого HTML-тега на странице не используя устаревший атрибут align . Как вы возможно уже догадались, мы опять будем использовать стили (CSS), а точнее наш любимый атрибут style .

Итак, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

• text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.
• text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).
• text-align:right - Каждая строка прижимается к правой стороне.
• text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify , то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

Заголовок по центру.

Параграф по центру.

Результат в браузере

Заголовок по центру.

Текст параграфа прижимается вправо.

Параграф по центру.

Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline). Почему? А помните мы недавно выяснили, что ширина встроенного элемента равна его содержимому? Соответственно получается, что этому самому содержимому просто некуда будет выравниваться и браузер элементарно проигнорирует ваши «художества». :)

Домашнее задание.

1. Создайте заголовок статьи, двух ее разделов и одного подраздела в первом разделе. И пусть заголовок статьи располагается по центру страницы.
2. Установите для всей страницы шрифт Arial, а для всех заголовков - Times и пусть они будут написаны курсивом.
3. Цвет текста заголовка статьи поставьте #FF6600, разделов #6600FF, а подраздела оставьте неизменным.
4. Напишите под каждым заголовком по одному параграфу, причем текст каждого из них должен занимать не меньше трех строк при просмотре в браузере.
5. Выровняйте второй параграф по центру, третий - по правой стороне, а четвертый по обоим.