Для изображений стандарты не определяют принятого по умолчанию выравнивания по отношению к тексту и другим изображениям в той же строке – не всегда можно предсказать, как эти компоненты будут выглядеть.1 В HTML-документах изображения обычно расположены «в линию» только с одной строкой текста. Как принято в печатных средствах массовой информации текст их «обтекает», так что с изображением могут соседствовать несколько строк, а вовсе не одна.
К счастью, создатели документов способны отчасти управлять выравниванием изображений по отношению к окружающему тексту с помощью атрибута align тега . Стандарты HTML и XHTML определяют пять значений для атрибута align: left, right, top, middle, bottom. Значения left и right заставляют текст обтекать изображение, смещенное к соответствующему краю. Оставшиеся три выравнивают изображение в вертикальном направлении по отношению к окружающему тексту.
Все популярные броузеры, включая Opera, Firefox, Netscape и Internet Explorer, соглашаются с тем, что атрибут align=bottom является умолчанием вертикального выравнивания, и одинаково располагают картинки выше самого верхнего символа в строке текста, см. рис. 15.11.
В то же время броузеры расходятся во мнении, как располагать относительно текста изображения с атрибутом align=middle. На рис. 5.11 показано, что Netscape и Opera помещают изображение, ориентируясь на среднюю линию текста. Что касается броузеров Internet Explorer
Рис. 5.11. Стандартное выравнивание внедренных изображений
Рис. 5.12. Internet Explorer и Firefox совмещают среднюю линию изображения со средней линией самого высокого элемента, а не средней линией текста
и Firefox, они располагают изображение по средней линии самого высокого элемента, который не обязательно является текстовым (рис. 5.12).
Кроме того, броузеры в той или иной степени поддерживают пять дополнительных признаков вертикального выравнивания изображений: texttop, center, absmiddle, baseline и absbottom (кто не догадался об их смысле, поднимите руку):
Выражение align=texttop приказывает броузеру выровнять верхний край изображения с верхним краем самого высокого элемента текста в текущей строке. Иначе действует значение top, которое выравнивает верхний край изображения с верхним краем самого высокого элемента, текстового компонента или изображения в текущей строке. Если строка не содержит других изображений, выступающих над текстом, texttop и top имеют одинаковый эффект. Opera не поддерживает texttop, но другие популярные броузеры интерпретируют его строго в соответствии с этим описанием.
Впервые появившись в броузере Internet Explorer и Netscape, значение center интерпретируется в броузерах Internet Explorer, Netscape и Firefox точно так же, как и значение middle. Только не будем забывать, что значение middle каждый из них понимает по-своему. Opera игнорирует выражение align=center.
Если вы присвоите атрибуту align тега значение absmiddle, броузер выставит абсолютную середину изображения против абсолютной середины текущей строки. Не так действуют значения middle и center, которые выравнивают середину изображения с базовой линией текущей строки текста. В то время как Netscape и Opera не проводят разницы между absmiddle и middle, Firefox и Internet Explorer используют эти значения для избирательного выравнивания изображений по средним линиям. Иными словами, Firefox и Internet Explorer воспринимают признак absmiddle так же, как Netscape воспринимает middle.
Рис. 5.13. При выравнивании изображений с атрибутом alingn=absbottom броузеры принимают во внимание нижние выносные элементы
bottom и baseline (принимаются по умолчанию)
Значения bottom и baseline имеют тот же эффект, как если бы вы не включили атрибут выравнивания совсем. Броузер выравнивает нижний край изображения с базовой линией текста. Не следует путать это с действием значения absbottom, которое учитывает и те части букв, что спускаются ниже базовой линии.1 (Если вы все еще держите руку поднятой, можете ее опустить.)
Выражение align=absbottom предлагает броузеру выровнять нижний край изображения с истинным нижним краем текста в текущей строке. Истинный нижний край – это самая нижняя точка текста с учетом всех нижних выносных элементов (например, нижняя часть символа «y»), даже если таковых в строке нет. Базовая линия проходит по нижнему краю «v» в символе «y». Opera, носитель стандарта, игнорирует значение absbottom, а другие популярные броузеры обращаются с ним согласно описанию (рис. 5.13).
Используйте top и middle для совмещения пиктограмм, маркеров списков и других специальных изображений с близлежащим текстом. В других случаях align=bottom (выбирается по умолчанию) достигает лучшего внешнего вида. Выравнивая одно или несколько изображений в строке, выбирайте то значение атрибута, которое позволит добиться наилучшего внешнего вида вашего документа.
Атрибут align , тега
Значение по умолчанию: left.
Обязательный атрибут: нет.
Пример HTML: применение атрибута align
| По центру | По центру |
| Справа | Справа |
Текст абзаца.
Результат. в браузере Google Chrome.
В браузере Internet Explorer.
Браузеры по разному понимают атрибут align . Google Chrome и Mozilla Firefox выравнивают только сами элементы, содержащиеся в контейнере
HTML теги, определяющие выравнивание текста, отступ
Выровненный по ширине текст используется в типографии
В примере ниже показано, как выровнить текст по ширине страницы:
| align="left" | align="right" |
|---|---|
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
|
| align="justify" | align="center" |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
С каждым днем растет число работников занятых в сфере услуг и распространении информации. Если символами прошлых столетий были ферма и фабрика, то символ нынешнего XXI века – это офис, оборудованный компьютерами, которые имеют доступ к информационному потоку. |
Значение justify обеспечивает равномерное выравнивание текста справа и слева , то есть по ширине . Такой метод широко используется в печати.
Выравнивание текста в HTML по центру, текст справа :
Результат:
Атрибуты и значения
HTML текст и его отступ слева страницы
Произведем отступ текста слева двумя способами:
Результат:
Посмотреть в новом окне.
Как известно, Хабр использует «олдскульные» атрибуты тегов, допускающие форматирование текста и рисунков в статьях и комментариях авторами. Среди таких тегов оказался один, отсутствующий в стандартах 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.
