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

#html #css #svg #vertical-text

#HTML #css #svg #вертикальный-текст

Вопрос:

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

    <svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start"  >VERTICAL TEXT TEST</text></svg>

Результат:

     <svg x="351" y="631" width="400" height="40" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start">VERTICAL TEXT TEST</text></svg>

Теперь для поворота по вертикали я попробовал этот подход:

1. Изменение высоты и ширины svg
2. двойной поворот на 90 градусов с использованием функции поворота и преобразования

Вот код для этого:

     <svg x="351" y="631" width="40" height="400" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="1.4" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" transform="rotate(90 0 40)" rotate="-90" >VERTICAL TEXT TEST</text></svg>

Результат :

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

Ответ №1:

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

 html, body {
  height: 100%;
}
text {
  text-orientation: upright;
}

 <svg width="100%" height="100%"><text x="100" y="0" font-family="Oswald Medium" font-size="35px" fill="black" writing-mode="vertical-lr" text-anchor="start">VERTICAL TEXT TEST</text></svg>

Развернуть фрагмент

1. Я хочу сделать это только с помощью атрибутов svg. Есть ли способ сделать это?

2. К сожалению, ориентация текста не является отображаемым атрибутом CSS. Вы могли бы попросить w3c добавить его в качестве отображаемого атрибута, я бы поддержал его реализацию в Firefox, если бы это было так.

3. Спасибо за предложение, но я искал быстрое решение для исправления, и это тоже с использованием атрибутов SVG

4. Многие атрибуты SVG — это просто свойства CSS. На самом деле нет никакой разницы.

Ответ №2:

Использование letter-spacing этого повлияет на вертикальный интервал в вашем случае из-за поворота

 <svg x="351" y="631" width="40" height="620" lines="1" type="textWrap" textWrap="false" name="VERTICAL TEXT TEST"><text x="0" y="40" font-family="Oswald Medium" letter-spacing="13" font-size="35px" characterWidth="0" textLength="none" lengthAdjust="spacingAndGlyphs" fill="black" text-anchor="start" transform="rotate(90 0 40)" rotate="-90" >VERTICAL TEXT TEST</text></svg>

Развернуть фрагмент