Discussion :

[apdf1]

Bonjour,

J'ai dans une Div un titre comme ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

       <div><center><span id="titre">Provence &nbsp;</span><sup class="distrit">  (Régions) </sup> </center></div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    #titre {
	position: absolute;
	top: 28px;
	left: 160px;
	color: #363434;
	font-weight: bold;
	font-weight: bold;
	font-style: italic;
	text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.4), -1px -2px 0 rgba(255, 255, 255, 1);
	font-size: 50px;
	border: solid 0px #fff;
	width: 600px;height: 60px;
}

J'aimerai que la taille de police s'ajuste en fonction du nombre de lettre, plus le titre et long plus la police devient petite.

Je vous remercie d'avance

Max

[Invité]

Bonjour,

Pas possible en CSS.
Il faudra un peu de JS.

N.B. si tu as plusieurs titres, il faut une classe. Pas un id.

Et la balise <center> est obsolète.

[apdf1]

Bonjour,

Donc il faut que je change de Forum aller sur Javascript?

N.B. si tu as plusieurs titres, il faut une classe. Pas un id.

Non j'ai un titre par ville.

max

[Invité]

Non j'ai un titre par ville.

- "J'ai un troupeau de moutons."
- "Ah bon ? Combien de têtes ?"
- "Une seule tête par mouton..."

[apdf1]

Re,

Je penser que tu aurais compris!

Chaque ville ou région sa occupe un nouveau code ou page ou feuille comme tu veut.

Max

[NoSmoking]

Bonjour,

J'aimerai que la taille de police s'ajuste en fonction du nombre de lettre, plus le titre et long plus la police devient petite.

c'est pour moi une mauvaise pratique, comment fait-on si le texte devient trop petit et donc difficilement lisible, perso si j'augmente l'épaisseur de mes verres mes lunettes vont touchées l'écran

[Invité]

Bonjour,

En JS, ce n'est pas difficile d'adapter la taille de la police (.fontSize) en fonction du nombre de caractères (.length).

Tu devrais pouvoir t'en sortir seul, non ?

[apdf1]

Bonjour jreaux62, NoSmoking,

Je vous remercie et vous souhaite de bonne fêtes

Max

[Watilin]

C’est un problème intéressant qui présente un certain nombre de subtilités. Je commencerais par mesurer dynamiquement la largeur du titre en appelant getBoundingClientRect. Si ça dépasse la limite que tu t’es fixée, tu peux appliquer une ou plusieurs de ces solutions :

passer à une fonte plus étroite (narrow) de la même police. Les polices les plus élaborées proposent différents niveaux d’« étroitesse », light, narrow, etc.
Dans la même idée, supprimer la graisse (bold) aidera à réduire l’espace total occupé par le texte.

jouer sur la propriété letter-spacing. Attention c’est très sensible, un intervalle comme -0.01ex est suffisant pour avoir un résultat perceptible.

jouer sur la taille de la police, mais en fixant une limite minimum pour ne pas impacter la lisibilité, comme l’a dit NoSmoking.

Une remarque un peu hors sujet : tu ne crois pas que div + center + span c’est un peu excessif comme balisage pour un simple titre ? Depuis le plus jeune âge de HTML il existe des balises de titre : h1, h2, etc. Je te conseille de (re)lire Structures et sections d'un document HTML5.