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

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

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

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

Типография

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

3′6″

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

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

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

Во всех остальных случаях подойдет сокращение: 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 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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