• Page Alain 6

    Je continue sur la série "Page Alain" mais le sujet est plus général.

    Je voudrais montrer, par copie d'écrans interposées, sur un PC de 1920x1080px de résolution et l'autre 1366x768px, les différences d'affichage d'un même code, avec texte en taille adaptative d'un côté et en valeurs fixes, d'un autre.

    Lorsque l'on écrit un texte dans un cadre, si le cadre est dimensionné en unités adaptatives, il est nécessaire d'utiliser le même genre d'unités pour la taille du texte.

    <div style="width: 80vw; height: 5vw; margin: 0.3vw auto; border: 0.4vw ridge black; text-align: center; font-size:2vw;">...</div>
    <div style="width: 80vw; height: 5vw; margin: 0.3vw auto; border: 0.4vw ridge black; text-align: center; font-size:28pt;">...</div>

    Voici les copies d'écran de ces deux cadres, la première sur un écran de 1920px de large et l'autre sur un écran de 1360px de large:

    ***

    Elles sont assez explicites pour expliquer l'intérêt des unités adaptatives !

    Dans le premier cas, la taille de la police (vw) s'est adaptée à la résolution de l'écran et dans l'autre (pt), non.


    Je profite de cette page pour revenir sur un attribut utile: le fait de dimensionner un cadre avec bordure et padding compris.

    Par défaut, si vous dimensionnez un cadre de 200px de large (peu importe l'unité) avec une bordure de 10px de large, votre cadre va mesurer 200+10+10=220px.

    Si vous souhaitez que le texte ne s'approche pas à moins de 15px des bords (padding:15px;), votre cadre va mesurer: 200+15+15=230px.

    Si vous cumulez bordure et padding, votre cadre va mesurer: 200+10+10+15+15=250px.

    Ce n'est parfois pas gênant, mais parfois, cela l'est !

    Un attribut box-sizing:border-box;  permet de rendre la bordure et le padding compris dans les dimensions que vous aurez indiquées.

    Les exemples sont en unités adaptatives mais le principe est le même.

    <div style="width: 80vw; height: 6vw; margin: 0.3vw auto; border: 0.4vw ridge black; text-align: center; font-size: 1.5vw; padding:1vw;">...</div>
    <div style="width: 80vw; height: 6vw; margin: 0.3vw auto; border: 0.4vw ridge black; text-align: center; font-size: 1.5vw; padding: 1vw; box-sizing: border-box;">....</div>

    Le second paragraphe mesure bien 80vw par 6vw hors tout, avec la bordure et position du texte proportionnés à cette dimension.

    Lorsque qu'un cadre, avec texte ou avec une image en fond, est placé dans un montage, avec un emplacement bien défini, il est impératif qu'il soit dimensionné en "hors tout" !