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

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

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

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

Типография

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

3′6″

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

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

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

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

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

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

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

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

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

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

<section>
<h1>Proteus Desk</h1>
<img src="desk.jpg" alt>
<p>A stylish desk with a glass-top surface and steel legs.</p>
<ul>
 <li>Dimensions:
 <ul>
 <li>Depth: 50 cm
 <li>Width: 60 cm
 <li>Height: 60 cm
 </ul>
 <li>Weight: 10 kg
</ul>
</section>

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

<section itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Proteus Desk</h1>
<img src="desk.jpg" alt="Proteus desk" itemprop="image">
<p itemprop="description">A stylish desk with a glass-top surface and steel legs.</p>
<ul>
 <li>Dimensions
 <ul>
 <li>Depth:
 <span itemprop="depth" itemscope itemtype="http://schema.org/QuantitativeValue">
 <span itemprop="value">50</span>
 &nbsp; 
 <data itemprop="unitCode" value="CMT">cm</data>
 </span>
 <li>Width: 
 <span itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
 <span itemprop="value">60</span>
 &nbsp; 
 <data itemprop="unitCode" value="CMT">cm</data>
 </span>
 <li>Height: 
 <span itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">
 <span itemprop="value">60</span>
 &nbsp; 
 <data itemprop="unitCode" value="CMT">cm</data>
 </span>
 </ul>
 <li>Weight
 <span itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">
 <span itemprop="value">10</span>
 &nbsp; 
 <data itemprop="unitCode" value="KGM">kg</data>
 </span>
</ul>
</section>

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

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

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

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

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree