Фізичні одиниці виміру в HTML5

16

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

У даному уроці ми поговоримо про те, що правильно закодовані реальні фізичні одиниці виміру суттєво полегшать життя при конвертації в інші величини, і подивимося, як це правильно робити.

Друкарня

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

3’6″

На сторінці: 3’6″

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

Метричні виміри

У всіх інших випадках підійде скорочення: 3 м це три метри, і т. д.; in – дюйм, ft – фут. Трохи правил:

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

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

Для відображення площ і обсягів використовуйте порядкові числівники.

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

Використовуйте звичайні дроби, якщо їх не можна записати в десятковій формі (тобто 1⅔»)

В ідеалі, додайте на сторінку інструмент з переведення даних в інші системи вимірювання.

Вимірювання і микроданные

Якщо немає можливості додати конвертер одиниць вимірювання, додайте в розмітку микроданные. Так ви уникнете непорозумінь (якщо написати 30 До, то це можна прочитати, як 30 кілометрів або 30 грудусов Кельвіна). Браузерам, рятувальникам та іншим інструментам буде легше зрозуміти, що ви хочете сказати. Наприклад, опис столу:

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

Proteus Desk

Фізичні одиниці виміру в HTML5

A stylish desk with a glass-top surface and steel legs.

  • Dimensions:
    • Depth: 50 cm
    • Width: 60 cm
    • Height: 60 cm
  • Weight: 10 kg

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

Proteus Desk

Фізичні одиниці виміру в HTML5

A stylish desk with a glass-top surface and steel legs.

  • Dimensions
    • Depth:

      50

      cm

    • Width:

      60

      cm

    • Height:

      60

      cm

  • Weight

    10

    kg

Варто зауважити:

Як видно, даний метод роздуває розмітку, зате додає семантичної точності: будь-скрін рідер буде точно знати, що означає кожен елемент.

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

HTML5 використовується для відображення одиниць вимірювання.

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