Линейка онлайн в см | HTML

Щелчок по линейке развернёт её на весь экран:


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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 к прочтению статьи

Размеры этого сантиметра рассчитываются браузером самостоятельно. Только Mozilla Firefox справился на пять с минусом — маленькие чёрточки всё же иногда съезжают. Кривое отображение в Google Chrome обусловлено неверным округлением px в сантиметры. IE не поддерживает единицу измерения ch.

На создание этой линейки меня сподвигла бытовая ситуация: нужно было узнать здесь и сейчас размер обуви ребёнка, а сантиметра не было.

Код очень прост:

<style>
#ruler {
  overflow: hidden;
  font-family: monospace;
  width: calc(100% - (1cm - .5ch));
  height: 2cm;
  line-height: 2cm;
  padding-left: calc(1cm - .5ch);
  word-spacing: calc(1cm - 2ch);
  background: rgba(64,199,129,1) repeat-x;
  background-image:
   linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),
   linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),
   linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),
   linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),
   linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px),
   linear-gradient(270deg, rgb(0,0,0) 1px, rgba(0,0,0,0) 1px);
  background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%;
  background-size: .1cm 10%, .5cm 20%, 1cm 30%, .1cm 10%, .5cm 20%, 1cm 30%;
}
#ruler span {
  word-spacing: calc(1cm - 3ch);
}
#ruler span span {
  word-spacing: calc(1cm - 2.5ch);
}
</style>

<div id="ruler">1 2 3 4 5 6 7 8 <span><span>9 10</span> 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50</span></div>
в f t
наверх ↑

7 комментариев:

Космо Мизраил Горыныч
У меня экран шириной в полметра, оказывается :D

На создание этой линейки меня сподвигла бытовая ситуация: нужно было узнать здесь и сейчас размер обуви ребёнка, а сантиметра не было.
После этой фразы я скатился под стол XD

По-моему, можно без ch спокойно обойтись, сделав стопку div'ов и указав им фиксированную ширину и выравнивание по центру... сейчас попробую накодить...
Космо Мизраил Горыныч
В общем, что-то получилось .-.
В мазилке и хроме выглядит идеально, а вот ИЕ 11 выпендрился, и некоторые фрагменты у него отображаются без рисочек .-. А так как теперь у него UserAgent == Mozilla, то хрен какие хаки на него повесишь =="

http://jsfiddle.net/CosmoMyzrailGorynych/M7mDu/3/
NMitra
У меня те же 50 см.

В Хроме отчего-то нет 2.5, 7.5 и т.д.
Я, кстати тоже думала в эту сторону, а потом махнула рукой, решила лично мне Мозилы достаточно :)
Андрей
:) Здорово. У меня в Хроме правду показывает, с обычной линейкой проверил.
Анонимный
А у меня оказывается длиной в полметра.
vlad ardas
пасиба
Unknown
Спасибо!