Comment trouvez-vous la plus grande taille de police qui ne casse pas un texte donné?

Question

J'essaie d'utiliser les CSS ( sous @media print ) et JavaScript pour imprimer un document d'une page avec un morceau de texte donné aussi grand que possible. tout en restant dans une largeur donnée. La longueur du texte n'étant pas connue à l'avance, la simple utilisation d'une police à largeur fixe n'est pas une option.

En d'autres termes, je recherche un redimensionnement approprié, de sorte que, par exemple, "IIIII". sortirait dans une taille de police beaucoup plus grande que & WWWWW " car " je " est beaucoup plus mince que & W; W " dans une police à largeur variable.

Le plus proche que j'ai pu obtenir avec cela utilise JavaScript pour essayer différentes tailles de police jusqu'à ce que clientWidth soit suffisamment petit. Cela fonctionne assez bien pour les supports d'écran, mais lorsque vous basculez sur le support d'impression , pouvez-vous garantir que les 90 DPI apparaisront sur mon système (c'est-à-dire que je mets les marges à 0,5 dans chaque côté , et pour un texte redimensionné de manière à ce qu'il tienne dans cette limite, je reçois environ 675 pour clientWidth ) sera le même ailleurs? Comment un navigateur décide-t-il quel DPI utiliser lors de la conversion à partir de mesures en pixels? Existe-t-il un moyen d'accéder à ces informations à l'aide de JavaScript?

J'adorerais s'il ne s'agissait que d'une fonctionnalité CSS3 ( taille de la police: max-pour-largeur (7.5in) ), mais si c'est le cas, je n'ai pas réussi à la trouver. .

Answer 1

Voici un code que j'ai finalement utilisé, au cas où quelqu'un le trouverait utile. Tout ce que vous avez à faire est de donner à la division externe la taille souhaitée en pouces.

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

La propriété CSS taille de police accepte les unités de longueur qui incluent des mesures absolues en pouces ou en centimètres:

  

Les unités de longueur absolue dépendent fortement du support de sortie et   donc sont moins utiles que les unités relatives. Les unités absolues suivantes   sont disponibles:

     

  
• in (pouces; 1in = 2,54cm)
  
• cm (centimètres; 1cm = 10mm)
  
• mm (millimètres)
  
• pt (points; 1pt = 1 / 72in)
  
• pc (picas; 1pc = 12pt)
  

Etant donné que vous ne connaissez pas encore le nombre de caractères de votre texte, vous devrez peut-être utiliser une combinaison de javascript et de CSS pour pouvoir définir dynamiquement la propriété font-size correctement. Par exemple, prenez la longueur de la chaîne en caractères et divisez le nombre de caractères par 8,5 (en supposant que vous attendiez du papier de format lettre US) et indiquez la taille en pouces permettant de définir la taille de la police pour ce morceau de texte. Testé la taille de la police avec des mesures absolues dans Firefox, Safari et IE6, elle devrait donc être assez portable. J'espère que ça aide.

MODIFIER : notez qu'il vous faudra peut-être aussi jouer avec des paramètres tels que la propriété d'espacement des lettres et expérimenter la police que vous utilisez, car le paramètre de taille de police n'est pas vraiment la largeur des lettres, qui sera différente en fonction de l'espacement des lettres, et de la police, proportionnelle à la longueur. Oh, et utiliser une police monospace aide;)

Answer 3

Je ne connais pas de moyen de faire cela en CSS. Je pense que votre meilleur pari serait d'utiliser Javascript:

1. Placez le texte dans un div
2. Obtenir les dimensions de la div
3. Réduisez le texte si nécessaire
4. Retournez à l'étape 2 jusqu'à ce que le texte soit suffisamment petit

Voici un exemple de code permettant de détecter la taille de la div. .