Escribir Ecuaciones en WordPress

Si tienes un blog académico o científico es posible que alguna vez te hayas preguntado como incluir ecuaciones matemáticas en tu blog sin tener que recurrir a las socorridas capturas de pantalla desde otras aplicaciones. Pues estás de suerte porque hay varias posibilidades para hacerlo, y las veremos todas.

Ecuaciones como Imágenes

Como podrás imaginar, puedes usar otros programas de edición de ecuaciones para producirlas, y luego guardarlas como imágenes. El resultado puede ser bueno pero si tienes muchas ecuaciones que incluir será bastante tedioso y cargará enormemente tu página.

Podrías usar texto para crear matemáticas, y esto suele ser lo que hace mas gente cuando no son necesarias fracciones u otras funciones avanzadas. También puedes usar HTML para escribir ecuaciones pero los resultados suelen ser malos y poco legibles.

MathML

Aún estamos esperando a que la mayoría de los navegadores soporten MathML, lo que permitiría que las ecuaciones matemáticas se mostrasen correctamente usando una serie de tags en el código, parecido a como haces con HTML. Sin embargo parece que no hay mucha prisa para implantar este estándar así que encontrarás muchos navegadores que no son capaces de mostar MathML correctamente o no lo mostrarán de ningún modo. Hasta que esto no se solucione es difícil que la comunidad científica adopte MathML como una solución adecuada, una pena.

Plugin LaTeX

LaTeX es una elección bastante habitual en la comunidad científica. Utiliza código para mostrar ecuaciones, y el documento final es un postscript o pdf, que genera documentos bastante buenos, de buen aspecto y presentación. En la web, las ecuaciones LaTeX pueden convertirse a imágenes .GIF.

Para WordPress tenemos un plugin que utiliza LaTeX para mostar el código como imágenes GIF dentro de tus posts. Sería una solución genial, el fin del problema, pero hay un gran escollo, y es que para usar el plugin debes poder instalar LaTeX en tu servidor, lo que suele quedar relegado a soluciones de servidores dedicados o virtuales, no accesibles para la mayoría de los usuarios.

CSS para Escribir Ecuaciones

Si no te satisfacen las anteriores soluciones, o no puedes instalar LaTeX en tu blog, puedes conseguirlo usando Hojas de Estilo en Cascada (CSS) para mostrar ecuaciones. Los resultados son bastante buenos, considerando que las hojas de estilo no se diseñaron con este propósito. El caso es que funciona, y lo que tienes que hacer es alterar el tamaño individual, posición, márgenes y bordes de los distintos elementos de texto a utilizar.

La mayoría de los navegadores soportan el uso de entidades HTML para símbolos matemáticos, y en eso se basa esta técnica. Un caracter difícil de encontrar es ħ, que se usa extensamente en física cuántica, y su código en «entidad HTML» es ħ Si quieres conocer mas entidades HTML para matemáticas u otros símbolos puedes encontrarlas en este enlace. El código que usaremos en el CSS sería este:

#eqn {
border: none;
margin: 0;
font-size: 1em;
}
.eqnnum {
float: right;
font-weight: bold;
}
.overline {
text-decoration: overline;
}
.unit-vector {
font-weight: bold;
}
.hat {
font-weight: bold;
font-size: 0px;
line-height: 0px;
display: none;
visibility: hidden;
}
sub {
vertical-align: middle
}
.big {
font-size: 2.2em;
font-family: ‘Times New Roman’, Serif; vertical-align: -0.25em;
margin-right: 6px;
padding-top 5px;
}
.bigbracket {
font-size: 2.0em;
vertical-align: -0.1em;
padding: 0;
font-family: ‘Times New Roman’, Serif; margin: 0;padding-right: 8px;
}
.normal {
vertical-align: middle;
}
.upperbound {
margin:0;
padding:0;
margin-left: -0.4em;
vertical-align: 1.1em;
font-size: 0.7em;
}
.upperbound2 {
margin:0;
padding:0;
margin-left: -1.6em;
vertical-align: 1.1em;
font-size: 0.7em;
}
.lowerbound {
margin:0;
padding:0;
margin-left: -0.9em;
vertical-align: -0.8em;
font-size: 0.7em;
}
.uppersum {
margin: 0;
padding:0;
margin-left: -1.8em;
vertical-align: 1.3em;
font-size: 0.7em;
}
.lowersum {
margin: 0;
padding:0;
margin-left: -1.6em;
vertical-align: -1.4em;
font-size: 0.7em;
}
.fraction {
text-align: right;
}
.numerator {
vertical-align: 0.7em;
border-bottom: solid 1px #333;
}
.denominator {
vertical-align: -0.7em;
margin-left: -1.4em;
}
.underlim {
margin: 0;
padding: 0;
margin-left: -3.5em;
vertical-align: -1.0em;
font-size: 0.7em;
}
.newtonsD {
margin:0;
padding: 0;
margin-left: -1em;
vertical-align: 0.8em;
margin-right: 0.4em;
}
.over {
margin: 0;
vertical-align: 0.9em;
margin-left: -0.8em;
font-size: 0.7em;
}

Para crear ecuaciones utilizaremos la tag span con la clase deseada. Por ejemplo, para crear la ecuación …

usamos este código:

<span class=“big”>Σ</span>
<sup class=“uppersum”>∞</sup>
<sub class=“lowersum”>k=0</sub>
<i>f</i>(<i>x</i><sub class=“normal”>k</sub>)Δ<i>x</i> =
<span class=“big”>∫</span>
<sup class=“upperbound”><i>b</i></sup><sub class=“lowerbound”><i>a</i></sub>
<i>f</i>(<i>x</i>) <i>dx</i>

Y para usar, por ejemplo, diferenciales como este …

usaríamos este otro código:

<span class=“numerator”><i>d </i></span>
<span class=“denominator”><i>dx</i></span>
(<i>U</i>/<i>V</i>) = [<i>U</i>
<span class="numerator"><i>dV</i></span>
<span class="denominator"><i>dx</i></span> - <i>V</i>
<span class="numerator"><i>dU</i></span>
<span class="denominator"><i>dx</i></span> ]/ <i>V</i><sup>2</sup>

Por supuesto, puede que quieras (o debas) alterar algunos de los valores, sobre todo dependiendo del tamaño de la tipografía. Este método, no obstante, es complicado cuando tienes que mostrar largas fracciones o matrices, pero para la mayoría de las situaciones funciona estupendamente y es un modo accesible de conseguir incluir ecuaciones en tu blog.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)