Круглый фон с возможностью ресайза

[Fraronoron]

Верстаю страницу которая будет отображаться в приложении на iPad, то есть будет работать только в WebKit. Проблема такая, есть заголовки, в форме h4 > i > b или h4 > b > i, в последнем теге номер, дальше идёт сам заголовок, задача такая: надо чтобы этот номер был в круге, белый шрифт на сером круге. Сделать такое не сложно, но в приложении есть функции масштабирования, я её сделал так:

function changeScale(percent) {    document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust = percent + '%';}

При изменении масштаба этот круг плывёт как только его душе угодно, то цифра уходит за круг, то круг в овал превращается и т.д. и т.п.

 

Как сделать нормальный кружок с текстом?

 

Пробовал с картинкой фокус, она не масштабируется и постоянно вылазит за границы элемента.

 

Вёрстку привести не могу так как она динамически генерируется, я только стили редактирую.

 

Спасибо!

 

[wwt]

http://jsfiddle.net/wwt/q835os60/

 

и так?