HTML, CSS: barra superior a juego símbolo de raíz cuadrada

¿Hay alguna manera en HTML 4 y/o CSS para hacer lo siguiente, pero entonces correctamente:HTML, CSS: barra superior a juego símbolo de raíz cuadrada

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

¿Cómo puedo mover mi expresión a la izquierda, bajo las ¯ símbolos, de tal manera que se solapan entre si? Nota: debería funcionar en todos los tamaños de fuente.

Gracias!

_{(Mi código actual, gracias Matthew Jones ⁽¹⁾ para la text-decoration: overline, carece de la escala de tamaños y correcta colocación de la línea alta. Es por eso que he editado esta cuestión, como ¯ hace el mismo tamaño & posición en el fuente Georgia.)}

Fuente

2010-05-18 Pindatjuh

Las siguientes obras exactamente como quería:

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

(Donde math define un font-family: Georgia y font-size)

Esto funciona en cualquier tipo de letra de tamaño! :-)

Ejemplo: http://jsbin.com/ihaba3

Fuente

2010-05-18 21:14:25 Pindatjuh

Y así es como se ve, con la división: http://jsbin.com/ihaba3/2 – Pindatjuh

This se ve horrible en mi navegador. Chrome 29. – chowey

Se podría establecer el CSS para el texto que debe aparecer en la barra superior como

text-decoration:overline

EDIT: Esto viene bastante maldito cerca de lo que quiere (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>

Por desgracia, no parece ser una manera de modificar el espesor de la misma línea alta ..

Fuente

2010-05-18 20:34:48

Acabo de probar que en el ejemplo anterior usando Firebug y funciona perfectamente * * !. – EAMann

Veo (aunque la entrada después de que el lapso agrega espacio horizontal, supongo que lo ha agregado debido al formateo en StackOverflow). Sin embargo, bajar la expresión no era mi objetivo, solo bajar la barra, el texto está en una buena posición. Gracias por ayudarme. – Pindatjuh

Esto funciona perfectamente para mí si no hay espacios en blanco entre la primera etiqueta de extensión final y la siguiente etiqueta de extensión de inicio. '' http://jsbin.com/utolo También podría usar una declaración 'border-top' para intentar igualar el grosor y se ve bastante bien: http://jsbin.com/utolo/2 – ghoppe

puede ser capaz de poner los caracteres debajo de la raíz en un tramo separado y luego darle un estilo con un borde en la parte superior. Pero probablemente tenga que aumentar el tamaño de letra del √ para alinearlo.

Fuente

2010-05-18 20:35:09 jordanstephens

En realidad 'border-top' funciona perfectamente! Echa un vistazo a este violín para compararlo con 'text-decoration: overline' http://jsfiddle.net/qDZNB/ – chowey

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

Fuente

2010-05-19 03:56:31 reisio

Sería bueno si esto funcionó en todos los navegadores actuales, ¿no? – ghoppe

Sería bueno si las personas dejaran de usar IE, sí. – reisio

HTML, CSS: barra superior a juego símbolo de raíz cuadrada

Respuesta

Cuestiones relacionadas