HTML, CSS: barre supérieure correspondant symbole racine carrée

est-il un moyen de HTML4 et/ou CSS pour faire ce qui suit, mais correctement:HTML, CSS: barre supérieure correspondant symbole racine carrée

√ ¯ ¯ ¯ ¯ ¯ ¯ φ & middot; (2 π − γ)
& thinsp; & thinsp; ↑ ← ← & thinsp; ←

Comment puis-je déplacer mon expression à gauche, sous les ¯ symboles, tels qu'ils se chevauchent eachother? Note: cela devrait fonctionner sur toutes les tailles de police.

Merci!

_{(Mon code actuel, merci Matthew Jones ⁽⁺¹⁾ pour le text-decoration: overline, n'a pas la mise à l'échelle des dimensions et le positionnement correctement le surlignage. Voilà pourquoi j'edited cette question, comme ¯ fait match taille & position dans la police Georgia.)}

Source

2010-05-18 Pindatjuh

Les travaux suivants exactement comme je le voulais:

<div class="math"> 
    &radic;<span>&macr;&macr;&macr;&macr;</span><span style="margin-left: -2.39em; vertical-align: 0.1em;">x + 1</span> 
</div>

(où math définit un font-family: Georgia et font-size)

fonctionne sur toutes la taille de la police! :-)

Exemple: http://jsbin.com/ihaba3

Source

2010-05-18 21:14:25 Pindatjuh

Et voici à quoi ça ressemble, avec division: http://jsbin.com/ihaba3/2 – Pindatjuh

semble horrible dans mon navigateur. Chrome 29. – chowey

Vous pouvez définir le CSS pour le texte qui doit apparaître sous la barre supérieure comme

text-decoration:overline

EDIT: Cela vient sacrément proche de ce que vous voulez (Chrome 4.1.249):

<div style="font-family: Georgia; font-size: 200%"> 
    <span style="vertical-align: -15%;">&radic;</span> 
    <span style="text-decoration: overline; vertical-align:-20%;">&nbsp;x&nbsp;+&nbsp;1&nbsp;</span> 
</div>

Malheureusement, il ne semble pas être un moyen de modifier l'épaisseur du surlignage lui-même ..

Source

2010-05-18 20:34:48

Je viens de tester que sur l'exemple ci-dessus en utilisant Firebug et il fonctionne parfaitement * * !. – EAMann

Je vois (bien que l'entrée après l'espace ajoute de l'espace horizontal, je suppose que vous l'avez ajouté en raison du formatage sur StackOverflow). Bien que l'abaissement de l'expression n'était pas mon but, juste abaissant la barre, le texte est bien placé. Merci de m'avoir aidé. – Pindatjuh

Cela fonctionne parfaitement pour moi s'il n'y a pas d'espace entre la première balise d'extrémité et la prochaine balise d'envergure. '' http://jsbin.com/utolo Vous pouvez également utiliser une déclaration 'border-top' pour essayer de faire correspondre l'épaisseur et cela semble assez bien: http://jsbin.com/utolo/2 – ghoppe

vous devriez être capable de mettre les caractères sous la racine dans une travée séparée, puis le style avec une bordure sur le dessus. Mais vous devrez probablement augmenter la taille de la police du √ pour le faire coïncider.

Source

2010-05-18 20:35:09 jordanstephens

En fait 'border-top' fonctionne parfaitement! Découvrez ce violon pour le comparer à 'text-decoration: overline' http://jsfiddle.net/qDZNB/ – chowey

<math xmlns="http://www.w3.org/1998/Math/MathML"> 
    <msqrt> 
     <mrow>φ(2π−γ)</mrow> 
    </msqrt> 
</math>

Source

2010-05-19 03:56:31 reisio

Serait bien si cela a fonctionné dans tous les navigateurs actuels, non? – ghoppe

Ce serait bien si les gens arrêtaient d'utiliser IE, oui. – reisio

HTML, CSS: barre supérieure correspondant symbole racine carrée

Répondre

Questions connexes