J'espère pouvoir trouver la hauteur du Baseline d'un morceau de texte dans une div en utilisant JavaScript.
Je ne peux pas utiliser de police prédéfinie, car nombre de mes utilisateurs utiliseront un réglage de police plus grand dans leur navigateur.
Comment puis-je faire cela dans JavaScript?
3 Réponses :
J'ai fait un petit plugin JQuery pour cela. Le principe est simple:
dans un conteneur, insérez 2 éléments en ligne avec le même contenu, mais un style très petit Voici le plugin de Coffeescript ( js ici ): p> puis, fumez-le avec: p> . Code> et l'autre très grand A code>.
Ensuite, comme il existe vertical-align: Baseline code> Par défaut, la ligne de base est donnée comme suit: p> $('body').baseline()
// or whatever selector:
$('#foo').baseline()
C'est bien! Merci beaucoup!
Une alternative plus complète pourrait utiliser Pomax.nihongoresources.com/pages/font.jsleight/a > - Je ne l'ai pas encore essayé mais semble super.
Salut @abernier. J'ai essayé votre code et quand je l'exécute, je reçois le numéro 1.1108247422680413 pour la base de référence sur ce que je suppose est la police par défaut de mon site Web. Pouvez-vous me dire ce que cela signifie? J'ai travaillé sur la base par les yeux et je ne vois pas comment le numéro que je reçois de votre méthode se rapporte. Merci d'avance.
Suivre la découverte de Alan Stearns ( http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-a-baseline-align-text/ ) Les éléments en ligne changent la base de référence Alignement des autres éléments en ligne, je mets ensemble une démo que j'ai trouvée plus précise que https://stackoverflow.com/a/11615439/67190 , et en fait plus simple à dériver une valeur en JavaScript: http://codepen.io/ Georgecrawford / Stylo / Gbajwj . J'espère que c'est utile. div {
width: 100px;
height: 100px;
border: thin black solid;
}
.letter {
font-size: 100px;
line-height: 0px;
background-color: #9BBCE3;
}
.strut {
display: inline-block;
height: 100px;
}
Hélas, votre solution ne semble pas fonctionner sur Firefox 37
Salut @george Crawford. Merci pour votre code et démos. Existe-t-il un document / dessin qui explique quelles les différentes valeurs que votre méthode revient se rapportent? La police et la lineheight sont évidentes. D'étudier vos démos, je pense La base est la taille du décendrier et le contenu est la taille totale de la police, c'est-à-dire + hauteur de capuchon + ascendeur, mais je pourrais me tromper. Une belle table ou une image serait utile.
Salut @george Crawford. Désolé - je vois que vous avez un diagramme sur l'un de vos Exemples . Très utile
p>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<span id="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</span>
<br><br>
<button class="btn btn-primary" onclick="positionLine();">position line on baseline</button>
<br><br>
<svg id="line">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:1"></line>
</svg>