Статьи / CSS + HTML


Текст под наклоном(наклонный текст) в firefox, opera, chrome и ie6, 7, 8

Наклонный текст в firefox, opera, chrome и ie6, 7, 8



Для современных браузеров:

//css
-moz-transform: rotate(-20deg); //firefox
-o-transform: rotate(-20deg); //opera
-webkit-transform: rotate(-20deg); //chrome


Пример:
наклонный текст








На span не работает в chrome

Для IE 6,7,8:


.ntext { width:200px;
height:20px;
padding-top:80px;
left:30px;
border:1px solid grey;
writing-mode:lr-tb;
filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.940', M12='0.342', M21='-0.342', M22='0.940', SizingMethod=«auto expand»); }


Пример:

Наклонный текст


Функция расчета:

var deg2rad = function (deg) { return deg / 180 * Math.PI; }
function ieTrans(deg) {
var rad,c,s;
rad = deg2rad(deg);
console.log(rad);
c = Math.cos(rad).toFixed(3);
s = Math.sin(rad).toFixed(3);

return { M11: c, M12: -s, M21: s, M22: c }
}
ieTrans(-20); // угол в -20 градусов

//----------------------------------------------------//
// Официальная версия скрипта с msdn:
var deg2radians = Math.PI * 2 / 360;

//oObj input requires an matrix filter applied.
//deg input defines the requested angle of rotation.

function fnResize(oObj,flMultiplier)
{ rad = deg * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);

oObj.filters.item(0).M11 = costheta;
oObj.filters.item(0).M12 = -sintheta;
oObj.filters.item(0).M21 = sintheta;
oObj.filters.item(0).M22 = costheta;
}


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