—»     —»   Самый простой способ создать вертикальный текст с помощью CSS
  Раздел: Tips and Tricks   Нет комментариев  

Самый простой способ создать вертикальный текст с помощью CSS



Сегодня утром мне нужно было создать вертикальный текст для проекта, над которым я работаю. После того, как я перепробовал пару идей, я залез в Twitter, чтобы посмотреть, какие идеи есть по этой теме. Сегодня мы покажем вам несколько отличных ответов и идей, которые мы получили!


Способ 1: Тэги 'br'

Итак, один из возможных (хотя и не рекомендуемых) способов получить вертикальный текст – это добавить тэги 'br' после каждой буквы.

<h1>
   N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>

: Смотреть демо

Не используйте этот метод. Он мало чем поможет и не стабилен.

Способ 2: Статическая ориентация

С помощью этого способа мы ориентируем каждую букву диапазона (span) и настраиваем ее отображение в своем CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>

  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>

</body>
</html>

: Смотреть демо

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

Способ 3: javascript

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

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>
  <h1> NETTUTS </h1>

  <script>
    var h1 = document.getElementsByTagName('h1')[0];
    h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
  </script>
</body>
</html>

: Смотреть демо

Этот метод уже определенно прогресс. В примере выше мы разбиваем текст на определенный порядок, а затем прописываем ориентацию каждой отдельной букве в диапазоне (span). Хотя мы могли бы использовать для оператора нечто вроде или сам «$.map» для того, чтобы применить фильтр к установленному порядку, намного лучшим и быстрым решением будет одновременно вручную соединить и применить ориентацию к тексту.

Хотя этот способ лучше, но это решение не рекомендуется.

* Не развалится ли макет, если отключить javascript?
* В идеале, мы должны воспользоваться для выполнения этой задачи средствами CSS.

Способ 4: Ширина блока

Если можно, давайте отойдем от javascript. Что, если применить параметр ширины к элементу блока и заставить текст поменять ориентацию? Это могло бы сработать.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  h1 {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
  }
</style>
</head>
<body>
  <h1> NETTUTS </h1>
</body>
</html>

: Смотреть демо

В этом сценарии мы применили очень маленькое значение ширины к тэгу h1, а потом сделали размер шрифта (font-size) в точности равным этому значению. Наконец, установив значение переноса слов (word-wrap) равным значению разрыва слов (break-word), мы можем заставить каждую букву встать на свою собственную строчку. Однако команда word-wrap: break-word – это часть спецификаций CSS3, и не совместима со всеми браузерами.

Если не принимать во внимание старые браузеры, то этот способ, по-видимому, решает проблемы… но не совсем. На демо-ролике видно, что способ работает, но играть со значениями пикселей слишком рискованно. Давайте попробуем что-то простое, вроде переключения букв из верхнего регистра в нижний.

Самый простой способ создать вертикальный текст с помощью CSS

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

Способ 5: Интервал между буквами (letter-spacing)

В качестве меры предосторожности и чтобы продолжить тему четвертого способа, почему бы не применить довольно большой интервал между буквами (letter-spacing), чтобы решить эту проблему?

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  h1 {
    width: 50px;
    font-size: 50px;
    word-wrap: break-word;
    letter-spacing: 20px; /* Set large letter-spacing as precaution */
  }
</style>
</head>
<body>
  <h1> Nettuts </h1>
</body>
</html>

: Смотреть демо

Это, кажется, решает проблему, но, опять-таки, здесь мы используем немного CSS3.

Способ 6: Величина em

В качестве альтернативы, есть очень простое решение. Помните, когда мы узнали, что применение параметра overflow: hidden к родительскому элементу чудесным образом заставит его содержимое плавать? Шестой способ чем-то напоминает его! Главное – использовать параметр em, и поместить интервал между каждой буквой.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
  h1 {
    width: 1em;
    font-size: 40px;
    letter-spacing: 40px; /* arbitrarily large letter-spacing for safety */
  }
</style>
</head>
<body>
  <h1> N e t t u t s </h1>
</body>
</html>

: Смотреть демо

Довольно ясно, правда? А еще вы можете таким образом применить любой размер шрифта, какой пожелаете. А все потому, что мы используем величину em (она равна x-height выбранного шрифта), и нам предоставляется больше гибкости.

Но, опять-таки, иногда на одной строчке может оказаться более одной буквы. Вы должны быть осторожны; именно поэтому я применил очень большое значение интервала между буквами (letter-spacing), чтобы быть уверенным, что на одной строчке никогда не окажется более одной буквы.

Насколько я знаю, на данный момент это самое лучшее решение вопроса, которое можно применить к любому браузеру.

Способ 7: Пробелы

Еще один последний способ добиться этого эффекта – это правильно использовать пробелы (white-space).

<!DOCTYPE HTML>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
         h1 { white-space: pre; }
      </style>
   </head>
   <body>

      <h1>
         J
         E
         F
         F
         R
         E
         Y
      </h1>
   </body>
</html>

: Смотреть демо

Установив значение параметра white-space на pre, вы приказываете тексту вести себя так, как будто он находится в тэге pre. Будучи таковым, он соответственно обращается с пробелами, которые вы добавляете.

Заключение

Разве не должно быть правила, которое бы могло выполнить эту задачу для CSS3? Что, если я могу сделать настройки на строчках: font-display: letter-block; которые бы интерпретировали бы каждую букву, как отдельный элемент?

Что вы об этом думаете? Есть ли у вас другие альтернативы для выполнения этой задачи, которые стоило бы рассмотреть? Многие предлагают использовать параметр поворот текста (text-rotation), чтобы выполнить эту задачу, но важно помнить, что это также поворачивает на 90 градусов весь текст, а это не то, чего мы хотим добиться.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 14615   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31