Différence d'interlignes dans des balises

**Sylv_62** · 03/03/2025, 13h15

Bonjour bonjour,

J'ai un souci qui semble venir du couple html/css, si quelqu'un peut me donner un avis voire un moyen de contournement j'en serais reconnaissant.

Pour situer un peu le contexte, j'ai un script xsl (version 1.0, ce qui complique déjà pas mal les choses) qui récupère des infos dans un fichier XML et génère via la méthode html un fichier PDF.
Perso, je trouve ça chaotique, mais c'est un ERP bien spécifique qui mouline tout ça, et j'ai (pour cette situation) le malheur d'être plus porté sur l'infra que le développement.

J'en viens donc au body, qui est composé de balises HTML, sinon j'aurais l'impression d'être dans la mauvaise section.

L'affichage est géré dans des balises , par exemple :

Code :

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

1
2
3
4
 
<p class="TelleClasse" align="left" valign="center">
instructions XSL
</p>

Pour gérer les interlignes de TelleClasse, qui étaient un peu trop espacés, j'ai modifié le .css de cette façon :

Code :

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

1
2
3
4
 
font-family: Aptos ;
font-size: 9pt;
line-height : 0.70em;

Pour la plupart de mon affichage, c'est OK, mais j'ai une section (toujours dans un ) qui semble "manger" les interlignes.
Sur les autres parties, j'ai un interligne "constant" d'environ 3mm, et pile sur cette partie j'ai une absence totale d'interligne :o
La différence de cette partie est qu'elle fait appel à un template XSL pour remplacer les retours chariots par des balises "propres" :

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
 
<xsl:template name="br-replace">
	<xsl:param name="string"/>
	<xsl:choose>
		<xsl:when test="contains($string,'&#xa;')">
			<xsl:value-of select="substring-before($string,'&#xa;')"/>
			<br/>
			<xsl:call-template name="br-replace">
				<xsl:with-param name="string" select="substring-after($string,'&#xa;')"/>
			</xsl:call-template>
		</xsl:when>
		<xsl:otherwise>
			<xsl:value-of select="$string"/>
		</xsl:otherwise>
	</xsl:choose>
</xsl:template>

Tel que je le comprends, ce script récursif remplace le caractère ASCII du retour chariot par un à chaque occurrence de façon récursive (j'ai un peu de restes de mes cours d'algorithme quand même).
J'ai toujours un doute sur le template XSL en rédigeant ce message, mais je précise que j'avais au départ mis la section posant problème dans une balise <pre> (qui me permettait de l'afficher avec ses retours chariots MAIS toujours avec ce problème d'interligne trop réduit), avec bien sûr les mêmes propriétés pour le <pre> que pour les .

Tel que je le comprends, dans les autres balises , les sont interprétés correctement et ma hauteur de ligne (line-height) dans le css est respectée.
Mais pour cette partir, alors que le contenu renvoyé par le XSL contient les mêmes balises et que j'affiche ça dans un tout pareil que les autres, l'interligne est supprimé, comme si une autre directive line-height s'appliquait ou je ne sais quoi.

J'espère que ma façon de présenter mon problème est compréhensible (pour des questions de confidentialité des données, je ne peux pas fournir de scan du rendu PDF, et je doute que mettre des centaines de lignes de code aidera à cibler ce qui cloche.

J'espère également que mon ressenti est bon et que mon post est donc dans la bonne section, si pas j'en présentes mes excuses d'avance.

Et du coup, merci d'avance aux personnes qui liront mon fouillis et qui m'aideront

**CosmoKnacki** · 03/03/2025, 14h11

Si tu ne fournis ni le code html, ni le code css, (ou un code reproduisant le problème où on peut voir les passages où l'interligne est celle attendue et les passages où ça ne marche pas), ça va pas être facile de t'aider.

**Sylv_62** · 03/03/2025, 15h12

Mais si, voyons, avec de la bonne volonté

Plus sérieusement, voici la partie du css concernée par ce sujet :

Code :

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

1
2
3
4
5
6
 
.texteStandard{
    font-family: Aptos ;
    font-size: 9pt;
    line-height : 0.70em;
}

Une partie "fonctionnelle" (en termes d'affichage) de mon contenu :

Code :

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

1
2
3
4
 
<p class="texteStandard" align="left" valign="center">
    <b><xsl:value-of select="concat('  Coût total : ', translate(format-number(total_cost,'#,##0.00'), ',.', ' ,'), ' € HT')"/></b><br />
</p>

Tel que je le comprends (mes cours de HTML remontent à 2009

), ma section récupère donc ses infos de police, taille de police et hauteur de ligne dans la classe texteStandard, et on y ajoute un alignement horizontal à gauche + alignement vertical centré (dans sa ligne).
Le contenu XSL concatène ensuite du texte brut avec un affichage au format monétaire de la valeur de l'attribut total_cost (total_cost qui vient du fichier XML généré par l'ERP).
Je passe sur le qui met cette ligne en gras, j'aurais pu prendre plusieurs autres lignes en exemple mais celle-ci est déjà parlante dans sa construction et l'interprétation du xsl (du moins je trouve).

Vient ensuite ma partie qui s'affiche mal :

Code :

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

1
2
3
4
5
6
7
8
9
 
<xsl:if test="po_comments!=''">
    <p class="texteStandard" align="left" valign="center">
        <xsl:call-template name="br-replace">
            <xsl:with-param name="string" select="po_comments"/>
        </xsl:call-template>
        <!--<pre class="texteStandard" align="left" valign="center"><xsl:value-of select="po_comments"/><br /></pre>-->
    </p>
</xsl:if>

Le <pre> qui est mis en commentaire est "l'ancienne" forme sous laquelle j'ai affiché mon texte avec ses retours chariots, tel qu'issu du fichier XML.
Forme avec laquelle j'avais (déjà) le souci d'interlignes trop serrés. Mais j'ai cru que c'était parce que j'avais mis ça dans une balise <pre> et non , et donc que ça mettait la grouille (pour parler poliment).
Hormis ça, je vérifie que le fichier XML contient bien une valeur non-vide pour l'attribut po_comments, et si oui je vais chercher le templace br-replace (que j'ai mis dans mon post d'origine) en lui passant po_comments en paramètre pour qu'il me renvoie po_comments avec des "propres" en fin de chaque ligne (en lien et place des retours chariots).
Une fois que j'ai récupéré ma chaîne de caractères "nettoyée", je l'affiche dans un qui va à nouveau récupérer (comme la section de code précédente) police, taille de police et hauteur de ligne dans la classe texteStandard et lui ajouter un alignement horizontal à gauche et vertical centré. Ces attributs sont mêmes à ma connaissance dans le même ordre, d'où le fait que j'ai du mal à m'expliquer pourquoi ça ne s'affiche pas de la même façon.

De ce fait, ça me met le doute : j'avais écrit que le souci semblait venir du html/css, mais je vais peut-être mener un autre test en parallèle (car j'aurais un peu de mal à comprendre pourquoi les mêmes attributs dans le même ordre donneraient deux résultats différents, et surtout juste pour cette partie du code).
Sans trop encombrer, car ce test est plutôt sur la partie XSL, je vais essayer de créer une variable dans laquelle je vais appeler mon template, pour afficher ma variable, au lieu d'afficher po_comments sans avoir la certitude qu'il soit bien modifié par le template (le moteur xsl peut toujours appeler la valeur de l'attribut contenu dans le fichier XML, au lieu d'appeler la chaîne de texte modifiée).

Je reviendrai donner les résultats de ce test, pour dire si j'ai toujours un souci d'affichage après modification.

**Sylv_62** · 03/03/2025, 15h33

Bon, en fait j'ai empiré le truc

Voici ce que j'ai essayé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<xsl:if test="po_comments!=''">
    <xsl:variable name="comments_brized">
        <xsl:call-template name="br-replace">
            <xsl:with-param name="string" select="po_comments"/>
        </xsl:call-template>
    </xsl:variable>
    <p class="texteStandard" align="left" valign="center">
        <xsl:value-of select="comments_brized"/>
        <!--<pre class="ILDstdSizeNH" align="left" valign="center"><xsl:value-of select="po_comments"/><br /></pre>-->
    </p>
</xsl:if>

Et là, comments_brized ne s'affiche pas

J'ai donc fait un retour en arrière, exit la variable comments_brized.

Je me suis dit au final "tiens, puisque ma classe texteStandard vient d'une autre classe (appelons-la tailleStandard par exemple), si j'attribue à ce qui pose problème cette classe tailleStandard, il se passe quoi?", donc je viens de faire ça.

Voici donc le css de tailleStandard :

Code :

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

1
2
3
4
5
 
.tailleStandard {
    font-family: Aptos ;
    font-size: 9pt;
}

Et le bout de code que j'ai modifié :

Code :

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

1
2
3
4
5
6
7
8
 
<xsl:if test="po_comments!=''">
    <p class="tailleStandard" align="left" valign="center">
        <xsl:call-template name="br-replace">
            <xsl:with-param name="string" select="po_comments"/>
        </xsl:call-template>
    </p>
</xsl:if>

Et là, miracle, j'ai un interligne qui apparaît dans la section concernée !
Cependant (sinon, c'était pas drôle) cet interligne n'est pas pareil qu'avec texteStandard (ça peut paraître logique), il est bien plus étroit (alors qu'au départ de mes modifications l'interligne était trop grand avec la classe tailleStandard).

Je me demande quand même pourquoi ce n'interprête pas les deux classes css (je précise que les deux classes sont dans le même fichier, qui est appelé dans mon xsl), alors qu'il est au même endroit que les autres (il n'est pas dans un sous-fichier appelé par le fichier principal)...
L'urgence est moindre (le fichier commence à ressembler à quelque chose), mais si quelqu'un a l'explication j'aimerais bien comprendre

**thelvin** · 04/03/2025, 02h12

Hello,

.... Les choses que tu mets dans des différents se retrouvent dans des boîtes différentes, qui sont espacées les unes des autres par les marges qu'il y a entre les , et pas par les "interlignes."

Pour qu'il y ait "interligne" dans un , il faut que ce contienne plus d'une ligne. Comme tu mets des à la fin de tes , ce qui n'a aucun sens, ça peut donner des résultats d'affichage funky, mais l'idée c'est que la notion de hauteur de ligne n'a de sens que dans des qui contiennent plus d'une ligne.

Donc, tes autres , dans lesquels tu t'acharnes à mettre des et pas à la fin cette fois, ceux-là ont vraiment plusieurs lignes. C'est pour ça qu'ils ont des espaces entre les lignes qui ne sont pas comme les qui n'ont qu'une ligne.

Bon, et sinon, si tu veux que les caractères fin de lignes soient affichés dans le rendu comme faisant une fin de ligne, sans utiliser la balise <pre>, en principe tu peux utiliser le CSS :

Code css :

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

1
2
3
4
5
.tailleStandard {
    font-family: Aptos ;
    font-size: 9pt;
    white-space: pre;
}

**Sylv_62** · 04/03/2025, 10h02

Hello Thelvin,

Je comprends mieux, merci

Enfin, j'espère que je comprends bien : le réglage que je fais sur mon line-height n'impacte que le dans lequel j'insère po_comments, puisque c'est le seul champ contenant plusieurs lignes.

Je me sens un peu idiot car expliqué comme ça, ça paraît absolument évident!

Et donc, si je comprends bien, je devrais quand même pouvoir apporter une amélioration via le css, mais en réduisant les marges, pas en jouant sur la hauteur de ligne.

Pour le rendu de fin de ligne, je garde l'astuce sous le coude, on ne sait jamais

Pour ce qui concerne les ajoutés à la fin des "monoligne", honnêtement je n'ai pas l'explication de leur justification.
Tous ces modèles ont été créés bien avant que j'arrive dans l'entreprise, et bien sûr les différents départs avant mon arrivée font qu'on n'a pas tout l'historique du pourquoi et du comment.
Cela dit, si je m'aperçois qu'ils sont complétement inutiles dans mes tests concernant les marges, je les supprimerai, ça ne fera qu'alléger un peu la chose.

Je m'en vais donc Googler la partie modification des marges, ça me permettra d'apprendre une chose de plus

**Sylv_62** · 04/03/2025, 11h51

Problème réglé, après test une valeur margin-botton:-12px m'a permis d'avoir des espacements équivalents entre deux à mes interlignes liés aux .

Encore merci Thelvin pour tes explications (et ta patience).

Pour la petite histoire, je viens d'essayer de supprimer les en fin de certaines lignes, et dans ce cas l'écart entre les n'est plus suffisant, ce qui provoque un chevauchement des lignes affichées.
Donc je laisse tel que mes prédécesseur ont fait, et ça conviendra à mes utilisateurs.

**CosmoKnacki** · 04/03/2025, 19h44

Tu devrais plutôt faire le contraire: 1) supprimer les 2) régler tes marges (pense aussi que l'espacement entre les paragraphes se joue aussi bien avec margin-bottom que margin-top).

**Sylv_62** · 05/03/2025, 09h17

Sur le fond, je suis d'accord, et je suppose qu'on peut "cumuler" margin-top (qui va m'ajuster la hauteur au-dessus de la première ligne du ), margin-bottom (qui va s'occuper de la hauteur après la dernière ligne) et line-height (qui se chargera de la hauteur des lignes, et par conséquent des interlignes).

Sur la forme, je sais comment ça va se passer, maintenant que ça fonctionne +/- selon le rendu espéré, on ne va plus y toucher jusqu'à la prochaine demande, on va avoir d'autres urgences qui vont faire passer ce sujet à la trappe, et pour finir le jour où on reviendra là-dessus on va s'interroger sur la présence des , line-height, margin-bootom et pester sur le c*n qui a fait ça

Différence d'interlignes dans des balises <p>

HTML

Discussions similaires

Partager

Partager