Размещаем текст по окружности CSS

Нет простого и стандартного способа разместить текст по кругу (или по другой кривой). Но задачу можно решить! В данном уроке будет описан один из способов. Однако, для решения понадобится как CSS3 так и JavaScript и в старых браузерах поддерживаться не будет. Если вам нужно обеспечивать обратную совместимость, то лучше воспользоваться изображениями с текстом.

Наш пример

Для описания техники сделаем вот такой круговой знак:

Анатомия процесса

Рассмотрим простую фразу:

Теперь все слова, которые надо разместить по кругу разделим на отдельные символы:

Выравниваем ширину всех символов при помощи моноширинного шрифта:

Делаем прямоугольники символов длинными, как спицы велосипедного колеса:

Затем складываем все прямоугольники один над другим в стопочку:

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

Поворачивая родительский элемент на нужный угол и удалив красные направляющие получаем нашу надпись, размещенную по окружности:

Техническая реализация

Для того, чтобы манипулировать каждым символом, поместим его в отдельный элемент span. Такую операцию может проделать плагин jQuery Lettering.js.

<h1>2015 Siteacademy 2015</h1>

Загружаем jQuery и Lettering, а затем запускам плагин:

$("h1").lettering();

И получаем измененную структуру DOM:

<h1>
<span class="char1">У</span>
<span class="char2">ч</span>
<span class="char3">е</span>
<span class="char4">б</span>
<span class="char5">н</span>
<!-- И так далее -->
</h1>

Такой метод хорошо работает с моноширинными шрифтами. Даже если вы будете имитировать моноширинность с помощью установки одинаковой ширины элементов span, пространство между символами будет разным, что выглядит криво. Можно в ручную править кернинг (занятие для упертых личностей с огромным резервом времени).

Каждому элементу span мы задаем высоту, позиционируем их в одну точку и устанавливаем центр поворота в нижней части элемента.

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

Теперь остается только пройтись по всему набору селекторов и установить для каждого поворот на нужный угол:

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* и так далее */

Также необходимо использовать префиксы производителей браузеров. Так что код получается довольно массивным. А с помощью SASS и Compass можно уложиться в три строки:

@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

Перевод статьи Set Text on a Circle

Тэги: text

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.