x
 
Илья
17 мая 2012

Как победить кривой рендеринг трансформированного (skew) текста на Винде?



Действительно, пример ниже ужасно смотрится под Виндоусом, причём в любом браузере:

Ударение, как того требуют законы термодинамики,
изящно тормозит изоморфный математический горизонт,
явно демонстрируя всю чушь вышесказанного.



Экспериментируя с разными техниками, я выяснил, что трансформированный текст выглядит приемлемо под Виндоусом, если отрисовать его в <canvas>.

Скриншот, демонстрирующий разницу:



Отрисовка многострочного текста через Canvas — задача нетривиальная. Функция fillText не поддерживает автоматический перенос строк, поэтому нужно найти строки скриптом и каждую отрисовать в своём блоке. Для простоты примера, в тексте используются принудительные переносы <br>:

var canvasText = function (original) {
  original.each(function () {
    var $this = $(this);

    var fontSize = $this.css('font-size');
    var lineHeight = $this.css('line-height');
    var font = 'normal ' + fontSize + '/' + lineHeight + ' Arial';

    var content = $this.html().split('<br>');
    var html = '';
    for (var _i = 0; _i < content.length; _i++) {
      html += '<span class="l">' + content[_i] + '</span>';
    }
    $this.html(html);

    $('.l', $this)
      .css({display:'block', height:lineHeight})
      .each(function () {
        var $this = $(this);
        var text = $this.text();
        var width = $this.width();
        var height = $this.height();

        $this.html('');

        var paper = $('<canvas></canvas>')
          .attr({width:width, height:height})
          .appendTo($this);
        var ctx = paper[0].getContext('2d');
        ctx.fillStyle = '#000';
        ctx.font = font;
        ctx.textBaseline = 'top';
        ctx.fillText(text, 0, 0);
      });
  });
}

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

<script>
  $(function () {
    if (/Windows/.test(navigator.userAgent)
        && Modernizr.csstransforms) {
      canvasText($('.ap-example_canvas p'));
    }
  });
</script>

<div class="ap-example ap-example_canvas">
  <p>Ударение, как того требуют законы термодинамики,<br>
  изящно тормозит изоморфный математический горизонт,<br>
  явно демонстрируя всю чушь вышесказанного.</p>
</div>

Ударение, как того требуют законы термодинамики,
изящно тормозит изоморфный математический горизонт,
явно демонстрируя всю чушь вышесказанного.



Если косых блоков немного и они редко меняются, попробуйте картинки вместо текста — дёшево и сердито.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Антон Кричевский
17 мая 2012

Возможно, дело в формате шрифта. Различные способы рендеринга шрифтов разных форматов на разных системах описаны в статье: http://www.smashingmagazine.com/…/04/24/a-closer-look-at-font-rendering (http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/)


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 2 4 4




Недавно всплыло

1 1 Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12