Линейка на сайт для измерения ширины

Однажды вам может понадобиться такая линейка, как вы видите выше. Например, если надо чтобы пользователь видел размеры своего экрана или для дизайнерских целей. Такая линейка не плохо вписывается в дизайн нашего сайта и может иметь декоративный смысл, но при этом показывать реальную ширину контейнера, в котором выводится текст этой публикации. Но, для большей точности, мы можем еще и текущую точную ширину линейки автоматически вычислять и выводить результат в пикселях. Например, сейчас Если после открытия страницы, вы измените размеры окна браузера, а значит изменятся и размеры поля для текста этой статьи, то для вычисления новой ширины надо перегрузить или обновить страницу (F5).

Теперь расскажем как сделать такую линейку. Во-первых, вам понадобится css для описания стиля какого-то контейнера, в котором будет отображаться линейка. В нашем случае css имеет вид:

.linerule {
margin: 0;
height:50px;
color: #fff;
background: rgba(51,82,113,0.8)
 url(/picture/svg/rule.svg) left top no-repeat;
}

Обратите внимание, для формирования фонового изображения понадобится изображение в формате svg. Вы можете загрузить этот файл здесь: rule.svg. Также необходимо установить контейнер на страницу в том месте, где должна отображаться линейка, следующий html-код:
<div class="linerule" id="tempwork"></div> И теперь последний шаг - разместить там, где необходимо отображать ширину линейки, следующий скрипт:

document.write('ширина линейки: '+
document.getElementById('tempwork').offsetWidth+' px.'); 

Как видите все очень просто. Весь секрет в графическом файле svg.