ti-enxame.com

jQuery / CSS: altura da linha "normal" ==? px

Estou chamando $("#foobar").css("line-height") e voltando "normal". Como eu traduzo isso para uma quantidade de pixels? "Normal" está definido na especificação CSS ou é específico do navegador?

39
JamesBrownIsDead

De acordo com nesta página , parece que a maioria dos navegadores recentes usa o mesmo valor para line-height: normal: 1.14, id é o font-size propriedade com um coeficiente de 1,14.

Tentei com vários navegadores (no Windows XP):

  • Chrome 21.0.1180.75
  • Firefox 14.0.1
  • Safari 5.1.7
  • Opera 11.64
  • IE 7
  • IE 8

[~ # ~] edite [~ # ~]

Eu estava errado, line-height depende de font-family, font-size, seu navegador, talvez seu sistema operacional ...

Mais leitura em site de Eric Meyers .

15
zessx

Normal é referido como abnormal em várias instâncias , pois há uma inconsistência no navegador.

declarar a altura da linha: normal não apenas varia de navegador para navegador, o que eu esperava - de fato, quantificar essas diferenças era o ponto -, mas também varia de uma fonte para outra e também pode variar dentro de uma determinada face.

7
Frankie

normal é uma configuração válida para line-height; portanto, não há realmente uma maneira de contornar isso para os navegadores que retornarão isso.

Como alternativa, você pode usar .css('height'), pois ele contará apenas a seção interior de um elemento, não preenchimento/borda/margem. Seria necessário um pouco de criatividade se você tivesse um elemento de várias linhas ou um elemento com mais do que apenas texto.

http://jsfiddle.net/xVBfb/

Editar: Um exemplo de solução alternativa seria ter

<span id='def' style='line-height:inherit;display:none;'>&nbsp;</span>

dentro do elemento, para encontrar a altura da linha, basta usar a .height() de #def, pois sempre haverá apenas uma linha e, portanto, a altura da linha do elemento pai.


Chrome no Windows XP é um exemplo de navegador que retorna normal nesse jsfiddle, a menos que seja explicitamente especificado o contrário. O Firefox retorna uma contagem de pixels. normal é a inicial valor por especificação do w3 http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

6
Robert

O cálculo exato da altura normal da linha em pixels é difícil. Porém, de acordo com MDN é aproximadamente 1,2em.

Se você:

body{
  font-size: 16px;
}

Portanto, seu site tem tamanho de fonte normal de 16px e a altura da linha normal seria aproximadamente 24px. Isso significa que você pode calcular o valor normal de pixel do tamanho da fonte multiplicado por 1.5 isso é 16px * 1.5 == 24px

Aviso: não multipliquei por 1,2 porque há diferença entre o valor de px e o valor em.

1
Bhojendra Rauniyar

No entanto, isso foi escrito há muito tempo, mas me ajudou a escrever uma solução temporária na minha tarefa. Estou copiando esse código do que talvez outras pessoas possam usá-lo.

$('#lineHeightInc')
.click(function() {
    var box = GetSelectedBox();
    var ct = box.data('LineHeight');
    if (isNaN(ct))
        ct = 0;
    ct++;
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px');
    box.data('LineHeight', ct);
});

$('#lineHeightDic')
.click(function () {
    var box = GetSelectedBox();
    var ct = box.data('LineHeight');
    if (isNaN(ct))
        ct = 0;
    ct--;
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px');
    box.data('LineHeight', ct);
});
0
Naser Yousefi