отображение повернутого текста со специальным шрифтом и переменным интервалом в CSS - PullRequest
Новая
       40

отображение повернутого текста со специальным шрифтом и переменным интервалом в CSS

2 голосов
/ 11 сентября 2011

Я хочу отобразить некоторый текст (скажем, ABCDHFEJBF), повернутый на -90 градусов.Я поместил его в промежуток и сделал 

display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

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

что-то вроде этого: 100% высоты браузера, установленной слева от страницы, поворачивается, и расстояние между символами должно быть переменным, поэтому пробелы между буквами увеличиваются с увеличением высоты браузера.

enter image description here

Если кто-то может помочь, это будет оценено.

Ответы [ 2 ]

1 голос
/ 11 сентября 2011

CSS имеет letter-spacing, что позволяет указывать пробелы между буквами.Установка этого значения в процентах позволит вам получить нужный эффект.

Редактировать: Очевидно, что процентное значение не принимается.Полезно знать, поэтому еще больше причин взглянуть на бит JS: P

Использование этого в сочетании с некоторым простым Javascript даст вам больший контроль над интервалом, если вы хотите - см. эту скрипку для работающей реализации JS. 

$(document).ready(function()
{
    $(window).resize(function()
    {
        var spacing = Math.floor($(this).height() / 70) + 'px';
        $('span').css('letter-spacing', spacing);
        $('#spacing').html(spacing);
    });
});

<span>Hello there</span>
<div id="spacing"></div>
0 голосов
/ 11 сентября 2011

То, что вы хотите, может быть сделано ... но без какого-либо скрипта, вам нужно каждый раз устанавливать правила css.Примерно так: 

span{
    display: block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    font-size:20px;
    letter-spacing:1em;
    margin-top:200px;
    position:absolute;
    top:0;
    left:-180px;
}

Примечание

Я использовал letter-spacing, чтобы отделить буквы, и position, чтобы установить его на стороне страницы.margin-top было необходимо, чтобы он появился на странице.

Пример: http://jsfiddle.net/jasongennaro/qkghV/

Возможно, вы могли бы также сделать эту динамику, но это потребовало бымного расчетов !!; -)

...