Como você encontra o maior tamanho de fonte que não quebra um determinado texto?

Question

Estou tentando usar CSS (debaixo @media print) e JavaScript para imprimir um documento de uma página com uma determinada peça de texto feita o maior possível, enquanto ainda se encaixa dentro de uma determinada largura. O comprimento do texto não é conhecido de antemão; portanto, simplesmente usar uma fonte de largura fixa não é uma opção.

Em outras palavras, estou procurando redimensionamento adequado, para que, por exemplo, "iiiii" saia em um tamanho de fonte muito maior do que "wwwww" porque "eu" é muito mais magro que "w" em uma variável -Width Font.

O mais próximo que consegui chegar a isso é usar JavaScript para tentar vários tamanhos de fonte até que o clientWidth é pequeno o suficiente. Isso funciona bem o suficiente para mídia de tela, mas quando você muda para a mídia impressa, há qualquer garantia de que os 90 dpi eu pareço entrar no meu sistema (ou seja, coloquei as margens a 0,5 polegadas de ambos clientWidth) será o mesmo em qualquer outro lugar? Como um navegador decide qual DPI usar ao converter das medições de pixel? Existe alguma maneira de acessar essas informações usando JavaScript?

Eu adoraria se esse fosse apenas um recurso CSS3 (font-size:max-for-width(7.5in)) Mas, se for, não consegui encontrá -lo.

Answer 1

Aqui está algum código que acabei usando, caso alguém possa achar útil. Tudo o que você precisa fazer é fazer a divisão externa o tamanho que você deseja em polegadas.

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}

Answer 2

A propriedade do tamanho da fonte CSS aceita unidades de comprimento que incluem medições absolutas em polegadas ou centímetros:

As unidades de comprimento absoluto são altamente dependentes do meio de saída e, portanto, são menos úteis que as unidades relativas. As seguintes unidades absolutas estão disponíveis:

• em (polegadas; 1in = 2,54cm)
• cm (centímetros; 1cm = 10mm)
• mm (milímetros)
• pt (pontos; 1pt = 1/72in)
• PC (Picas; 1pc = 12pt)

Como você ainda não sabe quantos caracteres seu texto é, pode ser necessário usar uma combinação de JavaScript e CSS para definir dinamicamente a propriedade do tamanho da fonte corretamente. Por exemplo, pegue a duração da corda nos caracteres e divida 8.5 (supondo que você esteja esperando o papel do tamanho da letra dos EUA) pelo número de caracteres e isso oferece o tamanho em polegadas para definir o tamanho da fonte para aquele pedaço de texto. Testou o tamanho da fonte com medições absolutas no Firefox, Safari e IE6, para que seja bastante portátil. Espero que ajude.

EDITAR: Observe que você também pode precisar brincar com configurações como a propriedade de espaçamento de cartas e experimentar qual fonte você usa, já que a configuração do tamanho da fonte não é realmente a largura das letras, que serão diferentes baseadas em no espaçamento das letras e na fonte, proporcional ao comprimento. Ah, e usar uma fonte monoespacial ajuda;)

Answer 3

Não conheço uma maneira de fazer isso no CSS. Eu acho que sua melhor aposta seria usar o JavaScript:

1. Coloque o texto em uma div
2. Obtenha as dimensões da div
3. Torne o texto menor, se necessário
4. Volte para a etapa 2 até que o texto seja pequeno o suficiente

Aqui estão alguns código de exemplo para detectar o tamanho da div.