web-dev-qa-db-fra.com

Comment calculer la meilleure largeur d'un élément de texte

Je développe un éditeur visuel où les nœuds de l'éditeur peuvent contenir du texte. La taille du texte peut varier et peut contenir n'importe quel caractère. Puisqu'il est important pour moi de minimiser la taille du modèle, je veux calculer la meilleure façon possible d'afficher le texte à l'intérieur du modèle.

Par exemple, supposons que vous ayez un nœud avec le texte Send data to external provider. Le moyen simple de le montrer serait d'avoir un nœud large et court avec tout le texte sur une seule ligne, comme ceci:

enter image description here

Mais à mon humble avis, une meilleure façon d'afficher le nœud est quelque chose comme ceci:

enter image description here

La question est donc de savoir quel devrait être le meilleur ratio (width:height) du texte affiché? Existe-t-il une "bonne" ration?

5
vainolo

Comme @kontur l'a déjà souligné, il y a de nombreuses considérations à prendre en compte. Mais si vous cherchez une solution approximative mais généralement réalisable, je considérerais quelque chose comme ce qui suit.

Définissez la largeur en fonction d'une fonction du nombre de caractères dans la chaîne et utilisez un habillage Word standard pour déterminer la disposition. À titre d'exemple grossier:

  1. Concevez un tableau d'algorithmes simple pour déterminer votre mise en page où le premier élément contient un tuple de deux éléments. Le premier représentant le nombre maximum de caractères à répartir sur une ligne et le second contenant la largeur (dans les unités que vous utilisez) de la zone. Le deuxième élément serait un tuple contenant le nombre maximum de caractères à répartir sur trois lignes et la largeur que vous souhaitez utiliser pour cette zone. Et continuez aussi longtemps que vous le souhaitez. Un exemple (en utilisant les em comme unités) peut être:
    [(30, 15), (48, 14), (62, 13),...]
  2. Comptez le nombre de caractères dans la chaîne.
  3. Vérifiez les éléments du tableau d'algorithmes pour trouver le premier pour lequel le premier élément du tuple est supérieur au nombre de caractères et définissez la largeur égale à la valeur du deuxième élément.

Cela ne sera pas aussi bon qu'un algorithme de mise en page avancé, mais fera le travail rapidement. Quelques exemples supplémentaires pour clarifier cela (en utilisant le tableau d'algorithmes donné ci-dessus):

Caractères = 49, largeur = 14
Caractères = 28, largeur = 12
Caractères = 63, largeur = 13

Vous devrez jouer avec le choix des nombres pour le tableau d'algorithmes pour obtenir ce que vous voulez, mais il devrait être meilleur qu'une largeur maximale fixe et plus facile à implémenter que n'importe quel algorithme avancé.

1
JohnGB

De manière générale, la façon dont vous définissez votre texte suit les exigences de votre application. Sans le contexte que vous avez fourni, votre premier exemple est beaucoup plus agréable à lire. Cependant, comme vous l'avez dit, c'est dans une interface utilisateur qui contient des nœuds que je peux imaginer que ce que vous recherchez est une manière générale de conserver de l'espace pour présenter du texte dans ces nœuds.

Soi-disant, pour votre situation, vous pourriez diviser un algorithme qui casse le texte de manière raisonnable pour accueillir vos nœuds dans l'espace souhaité. Le réglage de texte en général est un peu un art en soi et il y a beaucoup, beaucoup, beaucoup de choses au niveau du réglage fin qui sont difficiles à implémenter dans un algorithme, mais certaines choses que vous pourriez considérer:

  • mots/ligne ou caractères/ligne
  • augmenter le nombre de mots ou de caractères/ligne par rapport à la longueur totale de la chaîne
  • répartissez uniformément les lignes, c'est-à-dire évitez les mots simples sur une seule ligne (appelés "orphelins") - en d'autres termes, cassez la chaîne de manière à créer une quantité égale de mots ou de caractères/ligne

Des choses un peu plus difficiles à mettre en œuvre:

  • ne cassez pas deux ou trois termes Word inventés (comme "fournisseur externe" dans votre exemple)
  • prendre des signes de ponctuation comme indicateurs de rupture
  • césure
  • casser après les mots du connecteur comme et, o, etc.
  • tenir compte de la cohérence globale, par exemple, si vous avez trois nœuds avec quelques lignes courtes, il ne devrait pas y avoir de quatrième nœud avec une ligne trop longue

La mise en œuvre de ces éléments répertoriés est un tout autre cas, mais la conception d'un bon algorithme pour ce problème renforce la cohérence.

1
kontur