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

• Конвертер "Сколько секунд в минуте"
• Иконка "Домик" на CSS

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

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>