Предыдущий пост слегка получился печальным. Но не все так плохо…

Продолжим изыскания по теме. Прежде чем двинуться дальше стоит определиться с группами шрифтов. На предлагаемой вам тест-странице, часть из предложенных шрифтов разбита на группы. По аналогии с безопасной палитрой цветов, назовем шрифты, которые являются дефолтными для браузеров IE6(7), FF, OPERA и Safari таким же термином.

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

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

Итак, первая группа выглядит следующим образом:

default (общий)

• Default
• Times New Roman
• Sans-serif
• New York
• Geneva

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

Далее.

Группа OPERA:

• Fantasy
• Terminal

Одинаково смотрятся в этом браузере, но первый является дефолтным для IE, а второй для FireFox, Safari. Что ту скажешь, остается только развести руками.

Группа Safari:

• MS Sans Serif
• Times

Те же проблемы. Times является дефолтным для IE6(7), FF, OPERA.

Группа № 1:

• Arial
• Helvetica
• Serif

Тут Helvetica дефолт для OPERA.

Разные.

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

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

Естественно, проблема увеличения/уменьшения размера шрифта с помощью набора инструментов предоставляемых нам браузерами остается, но этот вопрос будет, затронут в следующих статьях.

Размер шрифта, гарнитура, относительные или фиксированные единицы измерения, где и как найти золотую середину? Сколько копий сломано и сколько еще будет? А браузеры? Бог ты мой, так и хочется вернуть СССР с его ГОСТ-ом. Едва ли производители данного продукта, когда-либо смогут договориться между собой, нам всем на радость, бизнес и конкуренция, и пофиг им стандарты и спецификации от W3C.

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

Ах, если бы…

Касался этих вопросов в своих публикациях, ссылки не привожу, ищем и находим.

Чтобы кто не говорил, а то, как выглядит текст в IE7, мне очень нравится, оставим в покое размер, шрифт, единицы измерения. Нравится и все тут. То же самое Safari.

Покончим с риторическими вопросами и претензиями, кто их услышит, кому это надо?

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

Может быть, что-то подобное, кто-то реализует иначе, поделитесь опытом.

Сам виноват - и слезы лью,
И охаю -
Попал в чужую колею
Глубокую.
"Чужая колея"
В.Высоцкий

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

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

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

Определимся, что же конкретно нам надо.

1. Любой элемент, находящийся в нашем блоке отцентрирован как по вертикали, так и по горизонтали
2. Графика ведет себя так, как сказано чуть выше
3. Никаких скриптов, голый html and css

По запросу "Vertically Center Content" в англоязычном сегменте Google, смог осилил только первые семь страниц, но в итоге стало ясно, что перечисленным условиям, все в едином комплекте, решения нет.

К великому сожалению в Рунете предпочитают больше рассуждать, как правильно с точки зрения стандартов от любимой и многоуважаемой конторы W3C, но вот с практикой явный застой и никаких по большому счету улучшений не предвидится. Не потому ли, на любой перевод статей зарубежных авторов, где рассматриваются те или иные аспекты именно с практической точки зрения, а вовсе не очередное изложение своего понимания спецификаций, все без исключения, слетаются как мухи на …, с многочисленными восторженными комментариями?

Чисто риторический вопрос, где свои собственные разработки, где уникальный контент? Так, чтобы без дураков - конкретная задача, конкретное решение, а не описка типа Яндекс - найдется все или Google - ничего и не терялось :)

Одно дело знать и поучать, что так свойственно нашим доморощенным "гуру" от верстки… Другое дело… Слово и дело…

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

Полное отсутствие инициативы, стремления просто так по зову души и сердца сделать нечто такое, чтоб все ахали и плакали навзрыд, это не про нас :) Согласен, такой выбор не каждому по плечу, но верстка – не терпит слабых, тем более тех, кто распыляет свои силы и время на бесчисленных тусовках по интересам.

Что ж, ждем новых переводов из-за бугра и под бой барабанов с громкими криками ура следуем по чужой колее :)

Вернемся к теме поста.

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

В принципе, ничего сложного, единственно, что смущает в реализации так это неоправданно, на мой взгляд, раздутый html. Но другого способа удовлетворяющего означенным условиям, пока нет, увы…

Скриншот, снят в FireFox, в других браузерах на тестовой странице, есть мелкие погрешности справиться, с которыми, почему-то не удалось :)

Слева на право, сверху вниз:

Просто текст, лишенный всяческих тегов, кроме перевода строки.

Текст в контейнере, для него прописан float, что будет, кстати, для горизонтального меню, которое располагается по центру, а при добавлении новых пунктов, раздвигается по горизонтали. Это еще одно из дополнительных условий, поставленное с целью универсализации данного метода.

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

css

.imagecenter {
  background-color:#fff;
  border:1px solid #ccc;
  display:table;
  float:left;
  margin:5px;
  width:160px;
  min-height:150px;
}
*html .imagecenter {height:150px;}
html:root .imagecenter {height:150px;}
.picturecenter {
  font:12px/1.18 arial;
  display:table-cell;
  text-align:center;
  position:relative;
  vertical-align:middle;
  width:100%;
}
.picture {position:relative;overflow:hidden;width:100%;}
.piece,.image {float:left;position:relative;}
.piece {left:50%;}
.image {left:-50%;}
.picturecenter {#top:50%;}
.picture {#top:-50%;}
html:root .image {float:none;}

Пройдемся по узловым позициям, они выделены цветом:

Синий - в FireFox min-height в данном случае не работает, так для справки.

Зеленый - правила для "любимого" браузера

Красный - снова FireFox, к чему это приведет, вы можете посмотреть, закомментировав или временно удалив стилевое правило в тест-странице.

html

<div class="imagecenter"> 
 <div class="picturecenter">
  <div class="picture">
   <div class="piece">
    <div class="image">
     Тут, Ваше все :) 
    </div>
   </div>
  </div>
 </div>
</div>

Разночтения:

Нижний отступ в IE и иная высота в OPERA. А вот в FF ничего подобного не наблюдается.

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

Пример