Физические единицы измерения в HTML5

Физические единицы измерения в HTML5

От автора: разработчики зачастую игнорируют физические величины на веб-страницах, такие как футы и дюймы, метры и кварты. Задача также привлекательна еще и с той стороны, что все мировое сообщество, кроме США, Либерии и Мьянмы, используют метрическую систему.

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

Типография

На самом деле, обычные одинарные и двойные кавычки с вашей клавиатуры не используются для отображения футов и дюймов: эти символы закодированы с помощью HTML-сущностей. Для отображения 3 футов и 6 дюймов потребуются оба символа:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На странице будет: 3′6″

Запомните, в отличие от остальных HTML тегов и свойств CSS, HTML-сущности регистрозависимы. Т.е. ″ and ′ — два совершенно разных символа. Таким же образом необходимо правильно отображать символ градусов (°) при измерении температуры или углов: °. Если речь идет о температуре, не забудьте добавить фаренгейты, цельсии или кельвины.

Метрические измерения

Во всех остальных случаях подойдет сокращение: 3 м это три метра, и т.д.; in – дюйм, ft – фут. Немного правил:

Никогда не сокращайте мили до «м», чтобы не спутать их с метрами.

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

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

При записи площадей используйте правильный символ умножения × К примеру, 30 см × 60 см даст нам запись 30 см х 60 см.

Используйте обыкновенные дроби, если их нельзя записать в десятичной форме (т.е. 1⅔″)

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Измерения и микроданные

Если нет возможности добавить конвертер единиц измерения, добавьте в разметку микроданные. Так вы избежите недоразумений (если написать 30 К, то это можно прочитать, как 30 километров или 30 грудусов Кельвина). Браузерам, поисковикам и другим инструментам будет легче понять, что вы хотите сказать. К примеру, описание стола:

Без микроданных

С микроданными

Стоит заметить:

Как видно, данный метод раздувает разметку, зато добавляет семантической точности: любой скрин ридер будет точно знать, что означает каждый элемент.

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

HTML5 <data> используется для отображения единиц измерения.

В качестве значений единиц измерений используются UN/CEFACT Common Codes.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree