Закруглить текст

Несколько слов о приложении:

Стандартные инструменты веб разработчика не позволяют придать обычному тексту круговую форму. Это решение может быть реализовано путем добавления картинки с округлым текстом, но у этого решения имеются свои недостатки:

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

Инструмент с данной страницы, в свою очередь, позволяет создать закругленный текст, который можно будет разместить на любой части HTML страницы, и он при этом останется текстом и сохранит свою форму. Для этого надо добавить код на страницу и разместить его с помощью маркеров позиционирования, исходя из задумки верстальщика: relative, absolute или fixed.

Инструкция к приложению:

  1. Впишите Ваш текст в поле "текстовая фраза"
  2. Заполните поля размеров: высота и ширина прямоугольника, в который будет вписан овал с текстом
  3. Назначьте начало отсчета, градус от которого будет происходить размещение текста. В случае, если текст находится внизу круга, разумно предположить, что Вы захотите видеть его в другом направлении, для этого нажмите перемычку "реверс"
  4. Для разметки важны стили будущего текста, поскольку изменение их на готовом решении может повлиять на ровность линии текста. Вы можете изменить размер и шрифт.
  5. Нажмите кнопку "Вперед" и Вы тут же увидите результат на экране предпросмотра. Чтобы посмотреть результат в полную величину, нажмите на кнопку с лупой
  6. В режиме полномасштабного просмотра также доступны функции корректировки отдельных символов. Кликните для этого по символу, который вы хотите передвинуть и измените значения его позиционирования.
  7. Результат работы программы представлен двумя текстовыми полями внизу экрана приложения: это минимальные стили, необходимые чтобы текст на странице отображался как в примере и сама разметка HTML содержимого, которое содержит сам текст в необходимых обертках.


  • 0
  • 90
  • 180
  • 270
text phrase
  • size
  • w
  • h
  • start position
  • d
  • reverse
  • font-family
  • font-size
style html