От автора: разработчики зачастую игнорируют физические величины на веб-страницах, такие как футы и дюймы, метры и кварты. Задача также привлекательна еще и с той стороны, что все мировое сообщество, кроме США, Либерии и Мьянмы, используют метрическую систему.
В данном уроке мы поговорим о том, что правильно закодированные реальные физические единицы измерения существенно облегчат жизнь при конвертации в другие величины, и посмотрим, как это правильно делать.
Типография
На самом деле, обычные одинарные и двойные кавычки с вашей клавиатуры не используются для отображения футов и дюймов: эти символы закодированы с помощью HTML-сущностей. Для отображения 3 футов и 6 дюймов потребуются оба символа:
|
1 |
3′6″ |
На странице будет: 3′6″
Запомните, в отличие от остальных HTML тегов и свойств CSS, HTML-сущности регистрозависимы. Т.е. ″ and ′ — два совершенно разных символа. Таким же образом необходимо правильно отображать символ градусов (°) при измерении температуры или углов: °. Если речь идет о температуре, не забудьте добавить фаренгейты, цельсии или кельвины.
Метрические измерения
Во всех остальных случаях подойдет сокращение: 3 м это три метра, и т.д.; in – дюйм, ft – фут. Немного правил:
Никогда не сокращайте мили до «м», чтобы не спутать их с метрами.
Метрические единицы измерения всегда отделяются пробелом. Чтобы единица измерения не перепрыгнула на следующую строку от числа, используйте неразрывной пробел: 2 м, к примеру.
Для отображения площадей и объемов используйте порядковые числительные.
При записи площадей используйте правильный символ умножения × К примеру, 30 см × 60 см даст нам запись 30 см х 60 см.
Используйте обыкновенные дроби, если их нельзя записать в десятичной форме (т.е. 1⅔″)
В идеале, добавьте на страницу инструмент по переводу данных в другие системы измерения.
Измерения и микроданные
Если нет возможности добавить конвертер единиц измерения, добавьте в разметку микроданные. Так вы избежите недоразумений (если написать 30 К, то это можно прочитать, как 30 километров или 30 грудусов Кельвина). Браузерам, поисковикам и другим инструментам будет легче понять, что вы хотите сказать. К примеру, описание стола:
Без микроданных
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
С микроданными
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<section itemscope itemtype="//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="//schema.org/QuantitativeValue"> <span itemprop="value">50</span> <data itemprop="unitCode" value="CMT">cm</data> </span> <li>Width: <span itemprop="width" itemscope itemtype="//schema.org/QuantitativeValue"> <span itemprop="value">60</span> <data itemprop="unitCode" value="CMT">cm</data> </span> <li>Height: <span itemprop="height" itemscope itemtype="//schema.org/QuantitativeValue"> <span itemprop="value">60</span> <data itemprop="unitCode" value="CMT">cm</data> </span> </ul> <li>Weight <span itemprop="weight" itemscope itemtype="//schema.org/QuantitativeValue"> <span itemprop="value">10</span> <data itemprop="unitCode" value="KGM">kg</data> </span> </ul> </section> |
Стоит заметить:
Как видно, данный метод раздувает разметку, зато добавляет семантической точности: любой скрин ридер будет точно знать, что означает каждый элемент.
Если у продукта больше трех единиц измерения, весь код можно сгенерировать в базах данных MySQL или с помощью парсера PHP, вместо того, чтобы прописывать его вручную.
HTML5 <data> используется для отображения единиц измерения.
В качестве значений единиц измерений используются UN/CEFACT Common Codes.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
