Блокировка текста онлайн урок.




<svg viewBox="0 0 100 100">
<text>
<tspan class="line-1" textLength="100" x="0" y="1em" font-size="20">
The Cat
</tspan>
<tspan class="line-2" textLength="100" x="0" dy="0.9em" font-size="20" lengthAdjust="spacingAndGlyphs">
in the
</tspan>
<tspan class="line-3" textLength="100" x="0" dy="0.9em" font-size="35">
Hat
</tspan>
</text>
</svg>

SVG предлагает& lt; tspan & gt;тег. Хотя он функционирует так же, как обычный& lt; span & gt;в HTML, он принимает атрибуты, которые разблокируют мощные возможности форматирования текста.

Одним из этих атрибутов являетсяtextLength. Если мы установим это на100, тогда текст, завернутый в& lt; tspan & gt;будет принудительно на всю длину контейнера SVG.

Другим одним из этих атрибутов являетсяlengthAdjust. Это применимо только тогда, когда& lt; tspan & gt;(или& lt; text & gt;) имеет наборtextLengthи обрабатывает способ расширения или сжатия текста в соответствии с этим пространством. Значение по умолчанию -spacing, которое сохраняет формы букв, но корректирует промежутки между символами. Вместо этого мы можем использоватьspacingAndGlyphs, и это будет регулировать расширение сжатия формы символов, а также, когда естественный интервал неудобен.

Подобно& lt; text & gt;,& lt; tspan & gt; Тегтакже принимает атрибутfont-size, который выполняет точно так, как вы могли ожидать: измените размер текста. Мы можем использовать это, чтобы внести коррективы в текст, где увеличениеtextLengthоставляет слишком много или слишком мало места иlengthAdjustискажает символы из-под удара.

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

Другие блокировки

Мы писали о блокировках типа

до :

Блокировка типа типографский дизайн, в котором слова и персонажи оформлены и оформлены очень конкретно. Как дизайн буквально заперт на месте.

SVG идеально подходит для такого рода вещей из-за того, как он изменяется. Текст внутри SVG не reflow, как тип в HTML, он масштабируется уникальным способом SVG, который часто находится в идеальном соотношении сторон, на котором он был создан (хотя вы можете это контролировать).

Итак, если вы разрабатываете что-то подобное в векторном программном обеспечении, таком как Adobe Illustrator:

Вы можете отображать его в Интернете (даже используя пользовательские шрифты) таким образом, чтобы блокировка сохранялась и масштабировалась:

Прочитайте больше.