Taille de la police qui change en fonction du remplissage du container

**Grasshoper** · 19/09/2021, 10h18

Bonjour à toutes et à tous,

Je me heurte à une problème que je ne comprends pas. J'ai une feuille de style CSS et un code html assez simples.
Lorsque je teste ce code sur un smartphone (Android) la taille de la police varie en fonction du remplissage du container (en texte). En gros, j'ai réussi à déterminer que si une phrase est supérieure à la 'width' (> 1 ligne) alors la police change (plus grosse) sinon (c'est à dire que la taille de la phrase < 1 ligne), elle et minuscule. Je parle ici de width en mode portrait.

Comment régler ce problème et homogénéiser la taille de police pour qu'elle reste de taille fixe partout?

J'ai produit un exemple minimal ci dessous:
Feuille de style:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
html {
	min-height: 100%;
}
 
body {
	background: white;
	position: absolute;
	width: 100%;
	font-size: 100%;
	overflow-x: hidden;
}
 
/*****
** FONT DEFINITION
*******/
@font-face {
	font-family: sans-serif;
	font-weight: normal;
	font-style: normal;
}
 
/*****
** STYLE AND POSITIONS OF DIVS
*******/
.useful-width {
	margin-left: auto;
	margin-right: auto;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 1.2em;
	text-align: justify;
	background-color: rgba(255, 255, 255, 0.9);
	min-height: 500px;
}

Un premier fichier index.html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="css/stylesCSS.css" />
	</head>
	<body>
		<div class="useful-width">
				Lorem ipsum dolor sit amet. Est veritatis dolor ut galisum pariatur ut deleniti blanditiis. Id inventore tenetur a earum culpa sed consequatur reiciendis sit repellendus modi? Ut tempora Quis quo soluta soluta aut deleniti eius eum dolorem galisum et quibusdam voluptate et illum fuga sit consectetur facilis.
				Nam modi temporibus ea sint repellat aut numquam voluptatem id itaque explicabo! Id voluptas accusamus non totam enim ab maiores magni ut dolorum iste est labore assumenda At unde repudiandae. Qui voluptatem minima id voluptatem dolorum aut natus pariatur. Et commodi officiis et voluptate internos aut sunt modi et deserunt consequatur et consequatur dolore ut autem nobis non cupiditate facilis.
				Ut magni aliquid qui impedit possimus id unde molestias sit ratione molestiae. Cum accusamus nulla qui neque maxime aut minus recusandae ad fuga earum. Rem quidem distinctio non nesciunt nisi eum corporis consequatur sed voluptatem quas quo voluptates enim sit commodi sunt!
		</div>
	</body>
</html>

et un second; identique, modulo la taille du texte:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="css/stylesCSS.css" />
	</head>
	<body>
		<div class="useful-width">
			test
		</div>
	</body>
</html>

Vous pouvez voir le rendu (sur smartphone) dans les 2 fichiers en PJ.

merci!

**vttman** · 19/09/2021, 11h16

Bonjour
Taper "Font scaling based on width of container" dans un moteur de recherche
=> 1er lien qui me semble répondre à la question + exemple sous codepen.io en prime ...

**Grasshoper** · 19/09/2021, 14h46

Merci pour ce retour rapide.
J'ai bien parcouru ce thread (et les différentes réponses), mais n'arrive toujours pas à comprendre. J'arrive bien à modifier la taille de la police pour les 2 exemples, mais celle-ci reste dépendante du remplissage de la width du container, plus précisément de si la première ligne est effectivement remplie (cad incluant un retour chariot).

Sans parler des @mediaqueries (puisque mon exemple minimal se base sur un seul device pour commencer, à width et height fixée), j'ai essayé différentes approches pour essayer de rendre la taille de la police exclusivement dépendante de la width ou height du viewport (body ou html) et non pas du <div> 'useful-width' donc): par ':root{}', changement d'unités par vh, vw, et rem mais sans succès.
Je me suis hasardé à tester calc() mais sans conviction, car il s'agit de calculer des bornes dynamiques pour la taille de la police qui peut être amenée à changer en fonction du device, à priori pas mon cas minimal si je comprends bien.
J'ai également essayé de tester des solutions exotiques comme remplir par des blancs insécables (" "), ou des retours chariots <br/> mai ca ne fonctionne pas.

**vttman** · 19/09/2021, 15h10

Je propose de remplacer le code initial de .useful-width par celui ci-dessous
Bien sûr il faut virer la ligne là
=>

Code :

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

font-size: 1.2em;

Ce qui nous donne

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.useful-width {
  font-size: calc(2vw + 2vh + 1vmin);
	margin-left: auto;
	margin-right: auto;
	padding-right: 10px;
	padding-left: 10px;
	text-align: justify;
	background-color: rgba(255, 255, 255, 0.9);
	min-height: 500px;
}

**Grasshoper** · 19/09/2021, 16h59

Merci vttman,
Je suis perplexe car en utilisant 'calc()' je parviens à modifier la taille générale de la police, comme attendu, mais une fois que 'x' dans 'x*vw+x*vh' ne permet pas au texte de remplir complètement une ligne du container, la police redevient minuscule.
Dis autrement, tant que "test" occupe plus d'une ligne, tout se passe bien (mais la police est monstrueusement grosse). Si ce n'est pas le cas, ca revient à la problématique initiale.
J'en déduis qu'il n'est sans doute pas possible d'avoir un taille de police "fixe" dans l'exemple minimal que je donne (à vw et vh fixé s'entend) à moins qu'il n'y ai suffisamment de texte dans le <div> pour que la taille du texte > width de 'useful-width' contenu par le device.

**vttman** · 19/09/2021, 17h18

Moi je vois ça qui ne me chagrine pas plus que ça en fait ?
Je regarde de mon PC ...

https://codepen.io/messinmaisoui/pen/xxrWjGm

Maintenant comme il n'y a pas tout ton css je suppose ? ... il y a sans doute d'autre règles qui s'appliquent et qui provoquent des effets non désirés ...

Taille de la police qui change en fonction du remplissage du container

CSS

Vue hybride

Discussions similaires

Partager

Partager