Text size adjust ms: Свойство «text-size-adjust» становится более кроссбраузерным / Habr – text-size-adjust — Web technology for developers

Leave a Comment / Разное / By /

Неизвестное свойство font-size-adjust – Zencoder

При создании CSS-правил сталкивались ли вы с ситуацией, когда при откате (fallback) шрифта у последнего менялась пропорциональность и текст начинал выглядеть больше или меньше оригинального?

Возможно, новое замечательное свойство из стандарта CSS3 поможет нам исправить ситуацию?

Что делает свойство font-size-adjust

Первое, что нужно сделать — это использовать браузер Firefox для того, чтобы страница с примером отображалась правильно. Да, не Safari, а только Firefox!

Свойство позволяет установить оптимальный коэффициент пропорциональности при использовании отката шрифта; если шрифт-заменитель имеет коэффициент пропорциональности, отличающийся от такого же коэффициента у главного шрифта, высота текста (которая приблизительно равна размеру буквы этого шрифта в нижнем регистре) останется неизменной.

Давайте рассмотрим рисунок ниже:

Как видим на рисунке, шрифт Baskerville и Georgia имеют разный

коэффициент пропорциональности. Если произойдет замещение шрифта (с учетом того, что шрифт Baskerville является главным), то в реальности размер шрифта визуально будет больше, при одинаковой величине.

Прим. переводчика. Еще раз — своими словами. На картинке видно, что одинаковые буквы А размером 320 пикселей у шрифта Baskerville и у шрифта Georgia на самом деле не одинаковые. Пропорции (о которых говорит Inyaili) букв у этих шрифтов разные! Теперь вспомним, как задается обычно шрифт в CSS-правилах.

К примеру, так:

font: bold 12px/18px Baskerville, Georgia, serif;

или же так:

font-family: Baskerville, Georgia, serif;

То есть, в правилах мы устанавливаем сначала главный шрифт Baskerville, который должен отображаться на странице; и вспомогательный шрифт Georgia, который должен отображаться, если браузер не найдет главный шрифт Baskerville (

это и есть откат шрифта, о котором упоминается в этой статье). В принципе — это основы CSS .

Теперь, если принимать во внимание картинку “Сравнение двух шрифтов”, то нетрудно представить, что произойдет при такой замене (откате).

Шрифт Baskerville заменится шрифтом Georgia, у обоих при этом в правилах CSS установлена одинаковая высота в 320 пикселей. Но фактическая высота (точнее — пропорции) вспомогательного шрифта Georgia больше, чем у первостепенного Baskerville! Догадайтесь, что произойдет с готовым дизайном страницы при таком откате?

При использовании свойства значение свойства для шрифта-заменителя будет разделено на значение .

Не путайте свойство со свойством 

1

-webkit-text-size-adjust
, которое используется для подстройки размера текста на iPhone.

Как определить значение свойства font-size-adjust

Отрывок из спецификации W3C однозначен:

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

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

p{
	font-family: Times New Roman;
	font-size: 400px;
}

span{
	border: 1px solid #ff0000;
}

.adjust{
	font-size-adjust: 0.5;
}
<p>
  <span>a</span>
  <span>a</span>
</p>

Оба элемента наследуют свойство от своего родителя (элемента ), но второй элемент также имеет еще и свойство , заданное через класс , значение которого выбрано наугад —

.

Если вы откроете страницу примера, то взгляните на образец слева: высота красных квадратов не совпадает — значение свойства подобрано неверно.

У вас все квадраты на странице примера имеют одинаковую высоту? Что я говорила?

После нескольких экспериментов я выбрала значение . И CSS-код, создающий второй пример (расположенный на странице справа).

p{
	font-family: Times New Roman;
	font-size: 400px;
}

span{
	border: 1px solid #00ff00;
}

.adjust{
	font-size-adjust: 0.455;
}

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

Пример работы свойства font-size-adjust

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

На этой странице состоит из следующих шрифтов: Calibri, Lucida Sans и Verdana (именно в этом порядке шрифты должны отображаться на странице в окне браузера).

Браузер Safari генерирует эту страницу следующим образом:

А вот так генерирует эту страницу браузер Firefox:

Как видите, браузер Firefox поддерживает одинаковую x-высоту () букв в зависимости от того, какой шрифт используется.

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

Кроме того, даже не смотря на то, что первый блок имеет корректный font stack, мне пришлось вручную прописывать в правилах шрифты Lucida Sans и Verdana для остальных блоков . Так что вы (и я) можете заметить разницу несмотря на то, что установлены все три шрифта.

Заключение

Догадываюсь, что использование свойства

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

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

У Inyaili de Leon есть еще одна интересная статья, которую планируется мною прочитать — “Будущее CSS типографики” (The Future Of CSS Typography) на малоизвестном ресурсе для дизайнеров Smashing Magazine.

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

Оригинал статьи расположен по адресу — “The Little Known font-size-adjust CSS3 Property”.

font-size-adjustcss

Интересные CSS-хаки, которые облегчат вам жизнь

Ниже несколько интересных CSS-хаков и свойств, о существовании которых забывают, а то и вовсе не знают.

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Вы знаете, что если для html жестко указать скролл по вертикали, то при динамическом добавлении контента у вас не будет неожиданного ресайза, когда скролл понадобиться, а мобильные браузеры не будут подстраивать размер шрифта если задать text-size-adjust.

outline: none;

Не стоит

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

::selection, ::-moz-selection {
    ...
}

Нехитрые манипуляции со стилями этих псевдо-элементов позволят вам поменять своства подсветки выделенных элементов на странице.

::-webkit-scrollbar {
    ...
}
::-webkit-scrollbar-button {
    ...
}
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-track-piece {
    ...
}
::-webkit-scrollbar-thumb {
    ...
}
::-webkit-scrollbar-corner {
    ...
}
::-webkit-resizer{
    ...
}

Поколдовав с этими нехитрыми псевдо-элементами вы сможете настроить внешний вид скроллбаров для десктопных браузеров на WebKit и

Blink. Но это не все, скроллы можно настроить и для IE:

body {
    scrollbar-base-color: #C0C0C0;
    scrollbar-base-color: #C0C0C0;
    scrollbar-3dlight-color: #C0C0C0;
    scrollbar-highlight-color: #C0C0C0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: black;
    scrollbar-shadow-color: #C0C0C0;
    scrollbar-dark-shadow-color: #C0C0C0;
}

И даже для `Firefox`:

@-moz-document url-prefix(http://),url-prefix(https://) {

scrollbar {
    -moz-appearance: none !important;
    background: rgb(0,255,0) !important;
}

thumb, scrollbarbutton {
    -moz-appearance: none !important;
    background-color: rgb(0,0,255) !important;
}

thumb:hover, scrollbarbutton:hover {
    -moz-appearance: none !important;
    background-color: rgb(255,0,0) !important;
}

scrollbarbutton {
    display: none !important;
}

scrollbar[orient="vertical"] {
    min-width: 15px !important;
}
}

Пока IE 7 жив, то необходимо помнить, что он ужасно скейлит изображения.

img {
    -ms-interpolation-mode: bicubic;
}

Вот этот код исправит ситуацию.

CSS. Что интересного есть в вашем стандартном шаблоне? — Хабр Q&A

Начал бы с того, что подобные сниппеты идеально хранить, шарить и даже командно работать в Gist (от GitHub), у Gist, кстати есть приложение на Хром (работает и оффлайново, что плюс), он легко встраивается в Sublime, и даже есть в Web Storm. Воркфло изрядно ускоряется с этим.

подсветка полей… в приведенных примерах для полноты не хватает select, кто-то забывает button)) Главное, что бы при переписывании нативного outline для :focus, для него находилась замена. Прежде всего потому что будет страдать accessibility.

более полный перенос слов: 

 
@mixin word-wrap() {
      -ms-word-break: break-all;
      word-break: break-all;
      word-break:     break-word;
      -webkit-hyphens: auto;
      -moz-hyphens:    auto;
      hyphens:         auto;
}

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

<html lang="ru"></html>

Добавить язык.

Или наоборот в случае когда на необходима только одна строчка текста:

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Вообще типографику люблю, поэтому есть и такое еще:

.like-inline:after {
	content: '\A';
	white-space: pre;
}

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

dl
     dt Артикул
     dd 1729110 
     dt Рост
     dd 164

Или нужно ряд ссылок оформить как список.

Класс для инлайн-блоков (что-то их недоиспользуют, а они намного круче float):

.ib {
     display: inline-block;
     vertical-align: top;
     zoom: 1;
     *display: inline;
}

CSS | text-size-adjust — решаемая

Свойство text-size-adjust позволяет контролировать алгоритм инфляции текста, используемый на некоторых мобильных устройствах. Поскольку это свойство нестандартно, оно должно быть префиксным: -moz-text-size-adjust , -webkit-text-size-adjust и -ms-text-size-adjust .

/* Text is never inflated */
text-size-adjust: none;

/* Text may be inflated */
text-size-adjust: auto;

/* Text may be inflated in this exact proportion */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

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

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

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

Примечания :
  • Это свойство нестандартно. Вы должны указать имя свойства для каждого движка, который вы хотите использовать.
  • Поведение и синтаксис этого свойства зависит от браузера и браузера. Дополнительную информацию см. В разделе совместимости браузера.
  • Это свойство работает только на смартфонах и некоторых планшетах . Настольные браузеры и некоторые планшетные браузеры не имеют алгоритма инфляции.
  • Если для параметра -webkit-text-size-adjust явно установлено значение none , более старые веб-браузеры на базе WebKit, такие как Chrome®26 или Safari≤5, вместо игнорирования этого свойства будут препятствовать пользователю изменять или уменьшать масштаб изображения на веб-страница. #
  • Не все двигатели, поддерживающие это свойство, позволяют использовать процентное значение (например, Webkit и Trident, но Gecko этого не делает). Подробнее см. Ниже раздел совместимости браузера.
Начальное значение auto для браузеров для смартфонов, поддерживающих инфляцию, в других случаях нет (а затем не поддается изменению).
Относится к все элементы
Inherited да
Процентное соотношение да, обратитесь к соответствующему размеру текстового шрифта
СМИ визуальный
Вычисленное значение как указано
Тип анимации дискретный
Канонический порядок уникальный недвойственный порядок, определяемый формальной грамматикой

Синтаксис

Свойство text-size-adjust указано как none , auto или <percentage> .

Значения

none
Отключает алгоритм инфляции браузера. На старых настольных браузерах на базе WebKit (Chrome≤26, Safari≤5) это вместо этого не позволит пользователю изменять или изменять масштаб веб-страницы.
auto
Включает алгоритм инфляции браузера. Это значение используется для отмены значения, ранее заданного с помощью CSS.
<percentage>
Включает алгоритм инфляции браузера, указав процентное значение, с помощью которого можно увеличить размер шрифта.

Формальный синтаксис 

none | auto | <percentage>

Характеристики

Совместимость с браузером

Добавить комментарий

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