A especificação possui uma função context.measureText (texto) que informará a largura necessária para imprimir esse texto, mas não consigo encontrar uma maneira de descobrir qual é a altura. Eu sei que é baseado na fonte, mas não sei converter uma string de fonte em uma altura de texto.
javascript
text
canvas
swampsjohn
fonte
fonte
M̶̢̹̝͖̦̖̭͕̭̣͆̃̀̅̒̊͌̿ͅ
, então esse é um problema muito complicado, então resolva para o caso geral.Respostas:
ATUALIZAÇÃO - para um exemplo deste trabalho, usei essa técnica no editor Carota .
Seguindo a resposta de ellisbben, aqui está uma versão aprimorada para obter a subida e descida da linha de base, ou seja, igual
tmAscent
etmDescent
retornada pela API GetTextMetric do Win32 . Isso é necessário se você deseja executar uma sequência de texto com quebra de linha, com extensões em diferentes fontes / tamanhos.A imagem acima foi gerada em uma tela no Safari, vermelho sendo a linha superior onde a tela foi solicitada para desenhar o texto, verde sendo a linha de base e azul sendo a parte inferior (de modo que vermelho a azul é a altura total).
Usando o jQuery para ser sucinto:
Além de um elemento de texto, adiciono uma div com
display: inline-block
para poder definir seuvertical-align
estilo e descobrir onde o navegador a colocou.Então você recupera um objeto com
ascent
,descent
eheight
(que é apenasascent
+descent
por conveniência). Para testá-lo, vale a pena ter uma função que desenha uma linha horizontal:Então você pode ver como o texto está posicionado na tela em relação à parte superior, linha de base e parte inferior:
fonte
getTextHeight()
paravar text = $('<span>Hg</span>').css({ 'font-family': fontName, 'font-size' : fontSize });
, ou seja, adicionando o tamanho separadamente.<div></div>
a<div style="white-space : nowrap;"></div>
lidar com corda muito longaVocê pode obter uma aproximação muito próxima da altura vertical verificando o comprimento de uma letra maiúscula M.
fonte
A especificação da tela não nos fornece um método para medir a altura de uma string. No entanto, você pode definir o tamanho do seu texto em pixels e geralmente pode descobrir quais são os limites verticais com relativa facilidade.
Se você precisar de algo mais preciso, poderá jogar texto na tela, obter dados de pixel e descobrir quantos pixels são usados verticalmente. Isso seria relativamente simples, mas não muito eficiente. Você pode fazer algo assim (funciona, mas desenha algum texto na tela que você deseja remover):
Para Bespin, eles falsificam uma altura medindo a largura de um 'm' minúsculo ... Eu não sei como isso é usado, e eu não recomendaria esse método. Aqui está o método Bespin relevante:
fonte
em
é uma medida de fonte relativa em que um em é igual à altura da letraM
no tamanho da fonte padrão.Os navegadores estão começando a suportar métricas avançadas de texto , o que tornará essa tarefa trivial quando for amplamente suportada:
fontHeight
fornece a altura da caixa delimitadora constante, independentemente da string que está sendo renderizada.actualHeight
é específico para a sequência que está sendo renderizada.Especifique: https://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-textmetrics-fontboundingboxascent e as seções logo abaixo.
Status do suporte (20 de agosto de 2017):
fonte
Edição: você está usando transformações de tela? Nesse caso, você precisará rastrear a matriz de transformação. O método a seguir deve medir a altura do texto com a transformação inicial.
EDIT # 2: Estranhamente, o código abaixo não produz respostas corretas quando eu o executo nesta página StackOverflow; é perfeitamente possível que a presença de algumas regras de estilo possa quebrar essa função.
A tela usa fontes definidas pelo CSS, portanto, em teoria, podemos adicionar um pedaço de texto com estilo apropriado ao documento e medir sua altura. Eu acho que isso é significativamente mais fácil do que renderizar texto e, em seguida, verificar dados de pixel, além de respeitar os descendentes e descendentes. Confira o seguinte:
Você precisará garantir que o estilo da fonte esteja correto no elemento DOM com o qual você mede a altura, mas isso é bastante direto; realmente você deve usar algo como
fonte
A altura do texto em pixels não é igual ao tamanho da fonte (em pts) se você definir a fonte usando context.font?
fonte
Como JJ Stiff sugere, você pode adicionar seu texto a um intervalo e, em seguida, medir o offsetHeight do período.
Como mostrado em HTML5Rocks
fonte
Apenas para adicionar à resposta de Daniel (o que é ótimo! E absolutamente certo!), Versão sem JQuery:
Acabei de testar o código acima e funciona muito bem nos mais recentes Chrome, FF e Safari no Mac.
Edição: Eu adicionei o tamanho da fonte também e testei com webfont em vez de fonte do sistema - funciona incrível.
fonte
Resolvi esse problema diretamente - usando a manipulação de pixels.
Aqui está a resposta gráfica:
Aqui está o código:
fonte
Como estou escrevendo um emulador de terminal, precisava desenhar retângulos em torno dos caracteres.
Obviamente, se você quiser a quantidade exata de espaço que o personagem ocupa, não ajudará. Mas isso lhe dará uma boa aproximação para certos usos.
fonte
Eu implementei uma boa biblioteca para medir a altura e largura exatas do texto usando a tela HTML. Isso deve fazer o que você quiser.
https://github.com/ChrisBellew/text-measurer.js
fonte
Aqui está uma função simples. Nenhuma biblioteca é necessária.
Eu escrevi essa função para obter os limites superior e inferior em relação à linha de base. Se
textBaseline
estiver definido comoalphabetic
. O que ele faz é criar outra tela e, em seguida, desenhar lá, e então encontrar o pixel mais em branco e mais em baixo. E esse é o limite superior e inferior. Ele retorna como relativo; portanto, se a altura for 20 px e não houver nada abaixo da linha de base, o limite superior será-20
.Você deve fornecer caracteres a ele. Caso contrário, ele fornecerá 0 altura e 0 largura, obviamente.
Uso:
Aqui está a função:
relativeBot
,,relativeTop
eheight
são as coisas úteis no objeto de retorno.Aqui está um exemplo de uso:
O
relativeBot
erelativeTop
é o que você vê nesta imagem aqui:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
fonte
resposta de uma linha
CSS "altura da linha: normal" está entre 1 e 1,2
leia aqui para mais informações
fonte
Engraçado que o TextMetrics tenha apenas largura e altura:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#textmetrics
Você pode usar um Span como neste exemplo?
http://mudcu.be/journal/2011/01/html5-typographic-metrics/#alignFix
fonte
Isto é o que eu fiz com base em algumas das outras respostas aqui:
fonte
Primeiro, você precisa definir a altura do tamanho da fonte e, em seguida, de acordo com o valor da altura da fonte para determinar a altura atual do seu texto, quanto, linhas de texto cruzado, é claro, a mesma altura do se a fonte precisar acumular, se o texto não exceder a maior altura da caixa de texto, todos serão exibidos, caso contrário, mostrará apenas o texto dentro do texto da caixa. Valores altos precisam de sua própria definição. Quanto maior a altura predefinida, maior a altura do texto que precisa ser exibido e interceptado.
Após o efeito ser processado (resolver)
Antes do efeito ser processado (não resolvido)
fonte
Descobri que JUST FOR ARIAL, a maneira mais simples, rápida e precisa de encontrar a altura da caixa delimitadora é usar a largura de certas letras. Se você planeja usar uma certa fonte sem permitir que o usuário escolha uma diferente, faça uma pequena pesquisa para encontrar a letra certa que faz o trabalho para essa fonte.
fonte
definir o tamanho da fonte pode não ser prático, já que definir
ctx.font = ''
usará o definido pelo CSS, bem como quaisquer tags de fonte incorporadas. Se você usa a fonte CSS, não tem idéia de qual é a altura de uma maneira programática, usando o método measureText, que é muito míope. Em outra nota, o IE8 retorna a largura e a altura.
fonte
Isso funciona 1) também para texto com várias linhas 2) e até no IE9!
fonte
Eu sei que essa é uma pergunta respondida antiga, mas, para referência futura, gostaria de adicionar uma solução curta, mínima e somente JS (sem jquery) que acredito que as pessoas possam se beneficiar:
fonte
Em situações normais, o seguinte deve funcionar:
fonte
Isso é assustador ... A altura do texto é o tamanho da fonte. Algum de vocês não leu a documentação?
isso definirá a altura para 22px.
a única razão pela qual há um ..
é porque a largura da string não pode ser determinada, a menos que ela saiba a string da qual você deseja a largura, mas para todas as strings desenhadas com a fonte .. a altura será 22px.
se você usar outra medida que não px, a altura ainda será a mesma, mas com essa medida, no máximo, tudo o que você precisa fazer é converter a medida.
fonte
Solução aproximada:
Este será um resultado preciso em fonte monoespaçada.
fonte