Вращение текста заголовка таблицы с CSS преобразовывает

Я только что получил ответ от службы поддержки Vector, это невозможно сделать из командной строки. Единственный способ автоматизировать это - использовать сервер COM вектора

.
35
задан Community 23 May 2017 в 12:17
поделиться

2 ответа

'преобразуйте' изменяет ориентацию всего элемента, Вы объявляете это на, не текстовое содержание в нем. Это больше похоже на 'матричное' свойство IE, чем 'режим записи'.

Кардинально, преобразование элемента не изменяется, как его размер содержания вычисляется (или как расположение его родителя затронуто тем размером). Алгоритмы CSS для вертикальной и горизонтальной калибровки отличаются и являются достаточно трудными разобраться к тому, чтобы быть с; нет никакого реального последовательного способа, которым они могли разместить содержание с произвольным вращением. Поэтому 'преобразуйте', похож на использование ‘положение: родственник’: это изменяется, где содержание представляется, но ничто, чтобы сделать с размером расположения.

Таким образом, если Вы захотите включать один в таблицу, то необходимо будет установить 'высоту' ячейки явно для размещения ожидаемой повернутой 'ширины'. Если Вы не знаете, что заранее могли потенциально изрубить его с JavaScript, возможно.

FWIW: для меня на Fx3.1b3 промежуток также повернут как другие. Однако в Windows с его горизонтально-единственным сглаживанием (ClearType) рендеринг не выглядит большим... хорошо представленное изображение могло выйти значительно лучше.

18
ответ дан bobince 27 November 2019 в 07:18
поделиться

Возможно использование встроенного SVG в документе XHTML (я тестировал только Safari и Firefox):

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <table border="1">
        <tr>
            <td>&#160;</td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
        </tr>
        <tr>
            <td>Example row header</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
  </body>
</html>

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

9
ответ дан 27 November 2019 в 07:18
поделиться
Другие вопросы по тегам:

Похожие вопросы: