Действительно, пример ниже ужасно смотрится под Виндоусом, причём в любом браузере:
Ударение, как того требуют законы термодинамики, изящно тормозит изоморфный математический горизонт, явно демонстрируя всю чушь вышесказанного.
Экспериментируя с разными техниками, я выяснил, что трансформированный текст выглядит приемлемо под Виндоусом, если отрисовать его в <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>
Ударение, как того требуют законы термодинамики, изящно тормозит изоморфный математический горизонт, явно демонстрируя всю чушь вышесказанного.
Если косых блоков немного и они редко меняются, попробуйте картинки вместо текста — дёшево и сердито.
|