IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrage vertical d'une police ttf pour filigrane wysiwyg


Sujet :

Centrer un élément en CSS

  1. #1
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut Centrage vertical d'une police ttf pour filigrane wysiwyg
    Bonjour,

    Je suis sur le point de terminer un module de filigrane wysiwyg (javascript et html/css + php côté serveur pour créer l'image finale) et je bute pour centrer automatiquement et verticalement une police ttf à l'intérieur du span conteneur du filigrane (qui est lui-même draggable sur l'image). J'ai pu créer une classe Php en utilisant la lib GD qui centre verticalement et exactement le filigrane dans son conteneur quelque soit la police utilisée, mais je n'ai pas trouvé comment faire l'équivalent en Css/Javascript.

    Pour l'instant je m'en sort en créant une classe Css pour chaque famille de police, qui repositionne verticalement le texte dans son conteneur avec des margin-top et/ou margin-bottom avec des valeurs négatives, mais cela oblige à faire ce paramétrage pour chaque nouvelle fonte ajoutée dans mon menu des fontes. N'y aurait-t-il pas moyen d'éviter cette étape et de trouver un formatage css ou javascript qui permettre de centrer verticalement et automatiquement n'importe quel type de fonte ttf dans un conteneur html ?

    Possible ou impossible ?

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    le modèle de rendu flex semble fait pour toi !

    Sur base d'une structure du type :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="conteneur">
      <span class="contenu">Du texte centré<br>dans le conteneur</span>
    </div>
    ...le <span> peut être remplacé par un autre élément.

    Il suffit d’appliquer les règles CSS suivantes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .conteneur {
      display: flex;              /*-- ou inline-flex --*/
      align-items: center;        /*-- alignement vertical --*/
      justify-content: center;    /*-- alignement horizontal, inutile si inline-flex --*/
      height: 10em;               /*-- hauteur ou min-height, obligatoire sinon pas grand intérêt --*/
    }
    .contenu {
      text-align: center;         /*-- ou pas --*/
      line-height: 1;             /*-- par précaution si multilignes --*/
    }

  3. #3
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Salut NoSmoking,

    Malheureusement cela ne change rien. Voici le code que j'ai testé:

    Code html : 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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <?=$fonte_face?>
    <style>
    .conteneur {
      display: flex;              /*-- ou inline-flex --*/
      align-items: center;        /*-- alignement vertical --*/
      justify-content: center;    /*-- alignement horizontal, inutile si inline-flex --*/
      height: 1.5em;               /*-- hauteur ou min-height, obligatoire sinon pas grand intérêt --*/
      font-size: 30px;
      background: rgba(100, 255, 255, 0.34) none repeat scroll 0% 0%;
    }
    .contenu {
      text-align: center;         /*-- ou pas --*/
      line-height: 1;             /*-- par précaution si multilignes --*/
      color: rgb(0, 128, 128); 
    }
    </style>
    </head>
    <body>
     
    <div class="conteneur" style="font-family: OpenSans-Bold; "><span class="contenu">fghgpqMLQGH</span></div>
    <div class="conteneur" style="font-family: Caveat-Bold;margin-top:0.5em"><span class="contenu">fghgpqMLQGH</span></div>
    <div class="conteneur" style="font-family: ComicNeue-BoldItalic;margin-top:0.5em"><span class="contenu">fghgpqMLQGH</span></div>
    <div class="conteneur" style="font-family: RobotoCondensed-Regular;margin-top:0.5em"><span class="contenu">fghgpqMLQGH</span></div>
    <div class="conteneur" style="font-family: Teko-Bold;margin-top:0.5em"><span class="contenu">fghgpqMLQGH</span></div>
    </body>
    </html>
    et voilà le résultat ci-dessous :
    Nom : Capture d’écran 2021-11-30 183642.png
Affichages : 105
Taille : 23,2 Ko
    Comme on le voit, la troisième et la cinquième police sont à peu près centrées verticalement mais pas les autres. Et je ne trouve pas de moyen pour mesurer/prévoir/corriger/imposer ce positionnement vertical dans la ligne et qui dépend des fontes.

    Pour faire le parallèle avec php, on peut utiliser la fonction imageftbbox qui permet de calculer le rectangle d'encadrement pour un texte, ce qui donne la possibilité de le centrer exactement dans son conteneur, mais je ne trouve rien d'équivalent en css.

    Tu vas peut-être me dire que je chipote, mais étant donné que c'est pour créer un module wysiwyg, je souhaite avoir un rendu sur l'image de prévisualisation quasi identique au rendu après traitement Php, ce que j'arrive à faire avec mes petites corrections et les propriétés margin, mais je dois créer une classe Css correspondant à la famille de la fonte pour appliquer ces corrections chaque fois que j'ajoute une nouvelle fonte. C'est pas la fin du monde mais je cherchais à éviter cette petite étape.

    J'avais préalablement fait des recherches et trouvé cet article qui semble étudier le sujet de manière quasi exhaustive, mais il date de 2017. C'est pourquoi je cherchais l'avis actualisé d'un spécialiste des css. Donc merci pour ta réponse, si tu ne trouve rien de mieux, cela me permet de savoir qu'il est inutile de chercher plus loin et je vais me contenter de ma solution empirique.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Comme on le voit, la troisième et la cinquième police sont à peu près centrées verticalement mais pas les autres.
    Il faut de bons yeux et la notion de centré verticalement peut prêter à interprétation mais il me semble voir l'idée.



    Tu vas peut-être me dire que je chipote,
    Non loin de moi cette idée aussi saute que grenue



    J'avais préalablement fait des recherches et trouvé cet article qui semble étudier le sujet de manière quasi exhaustive, mais il date de 2017.
    Je vois que tu as d'excellentes lectures et de qu'à écrit Vincent De Oliveira, à l'époque, est toujours bel et bien d'actualité. C'est toujours un plaisir que de lire ses publications.



    Donc merci pour ta réponse, si tu ne trouve rien de mieux, cela me permet de savoir qu'il est inutile de chercher plus loin et je vais me contenter de ma solution empirique.
    L'idée, dans ton cas, serait d'isoler l'élément dans un <canvas> pour pouvoir en extraire les offsets top et bottom.
    On peut donc calculer le décalage vertical par rapport à l'axe du texte et ainsi translater le conteneur.

    Plutôt qu'un de long discours, j'ai fais une approche que je te livre ici :

    Cela permet effectivement de voir l'influence de certains paramètres, je te laisse tester.

  5. #5
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Salut,

    Whaou! tu as sorti la grosse artillerie. Et superbe travail pour tes exemples.

    J'ai téléchargé les fichiers, cela me fera une solution en cas de besoin.

    Pour l'instant, je vais garder ma solution manuelle. Je pensais à automatiser par principe, parce que je fais des sites administrables, mais en même temps il est rare que des clients demandent de pouvoir administrer l'ajout de fontes, ils choisissent celles qu'ils veulent au départ et ensuite dans la très grande majorité des cas cela ne bouge plus. Ce serait quand même un peu too much de compliquer le code et de rajouter 200Ko de javascript pour une fonctionnalité annexe qui est loin d'être essentielle, je ne l'implémenterai donc que sur demande, ce sera plus simple.

    Mais bon, ça fonctionne, chapeau d'avoir relevé le défit

    Si tu veux voir le module de filigrane en question, il est ici. Ton avis serait évidemment le bienvenu si tu as le temps. Comme je le dis dans le sujet, je ne vois plus trop comment faire mieux, je veux dire comment faire plus simple/intuitif en gardant les fonctionnalités existantes. Ou peut être c'est bien comme ça, difficile d'avoir une appréciation objective quand on est le développeur puisque évidemment, on sait comment ça marche.

    En tous cas merci pour ta réponse sur l'alignement vertical, cela clos mon questionnement sur le sujet: c'est possible mais loin d'être simple.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Centrage vertical d'une balise par rapport à une autre
    Par Ironboy dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 04/03/2014, 10h03
  2. gdk_font_load avec une police TTF
    Par jmbaubet dans le forum GTK+ avec C & C++
    Réponses: 1
    Dernier message: 13/01/2009, 17h41
  3. Centrage vertical d'une image
    Par le-baron dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 29/02/2008, 11h58
  4. centrage vertical dans une DIV
    Par jpean.net dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/12/2007, 08h47
  5. [JAR][POLICE] Utiliser une police ttf dans un fichier jar
    Par Doc.Fusion dans le forum Général Java
    Réponses: 3
    Dernier message: 26/01/2005, 13h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo