Maquetación y tipografía para web

Subíndices y superíndices

¡Prueba gratis durante 10 días

nuestros 1265 cursos !

Prueba gratis Mostrar modalidades de suscripción
Olvídate de fórmulas mal maquetadas y de notaciones que nada tienen que ver con las matemáticas o la química. Vamos a aprender cómo maquetar fórmulas correctamente en web gracias a la función subíndice y superíndice.
05:00

Transcripción

¿Qué ocurre si tenemos que maquetar en web, no en papel –que allí sí que se puede– un texto científico un texto matemático, y tenemos que poner algún tipo de fórmula química o un X al cuadrado? Vamos a ver cómo se haría, porque sí se puede. Podemos aplicar estas reglas de OpenType avanzadas que hasta ahora estaban reservadas a tipografía "offline", a la tipografía tradicional, y vamos a ver cómo lo hacemos también en web. No está soportado por todos los navegadores, pero cada vez los navegadores van incorporando y soportando todas estas características. Vamos a verla, pues. Vamos a... por ejemplo, por aquí, vamos a abrir una nueva sección: superíndices y subíndices. Y vamos a poner un ejemplo, vamos a... lo que estamos diciendo: X elevado a N + 3. ¿Cómo podríamos ese N + 3? Bueno, pues lo vamos a poner en 'span', al que vamos a aplicar la clase 'superíndice', es decir, por encima de la línea de altura X o más o menos por la línea altura X, por encima del texto índice: X elevado a N + 3. ¿Se puede hacer lo mismo con subíndices? Por supuesto, vamos a verlo. Por ejemplo, la fórmula del agua H2O. Pero, claro, ese 2 tiene que ser subíndice. Está indicando que hay dos átomos de hidrógeno, con lo cual, tiene que ir en subíndice, porque así lo marca la notación química. Así pues, vamos a crear otro 'span', pero esta vez en vez de superíndice, lo vamos a hacer subíndice, ¿de acuerdo? Vamos a Safari y vemos que no ocurre nada porque no hemos aplicado ninguna regla. En ocasiones, a veces, igual has visto, por ejemplo aquí, este símbolo para indicar que lo que va detrás es una potencia. Pero esto, a pesar de que ha sido la solución durante algunos años, ahora ya no hace falta tirar de ese símbolo, sino que podemos poner realmente que allí hay una potencia y que podemos mezclar números y letras. Para ello, vamos a crear la clase 'superíndice', a la que vamos a aplicar la propiedad 'font-variant', pero en este caso 'position'. Ya no estamos con números ni con ligaduras, como hemos visto anteriormente, sino que ahora estamos con 'font-variant-position' y le vamos a decir que 'posición' super superíndice. Lo mismo con subíndice, 'font-variant-position', pero esta vez le decimos que por debajo, y el código es 'sub'. Así pues, ya lo tenemos: subíndice, superíndice –lo hemos escrito bien– superíndice , subíndice, aplicado a esos elementos. Veamos ahora a ver qué pasa. Pues que tenemos en este caso formula matemática, en este caso fórmula química correctamente mostradas, A pesar de que estamos –recordemos– en una web, podemos por fin maquetar cualquier texto, por científico que sea, podemos por fin maquetarlo, como digo, correctamente, con la notación que merece y con el cariño que merece y que haríamos en cualquier publicación de papel. Bien es cierto que estas características, pues hay que mirar si están soportadas, si no están soportadas por los navegadores y también que la tipografía en cuestión contenga estos caracteres. Muchas de las tipografías gratuitas no los contienen. En Google Web Fonts, vamos encontrar muchas limitaciones a este respecto, pero con tipografías profesionales, con tipografías de calidad, vamos a encontrar todas estas opciones y muchas más que poco a poco se van a ir soportando dentro de los estándares CSS, HTML, y por tanto la irán incorporando en su catálogo los principales navegadores. Así pues, hasta aquí: superíndices y subíndices. Podemos hacer felices a los matemáticos cuando les hagamos sus webs.

Maquetación y tipografía para web

Aprende cómo seleccionar una fuente óptima para su lectura en pantalla y cómo exprimirla para aprovechar en tus proyectos web todas las posibilidades de las fuentes OpenType.

2:10 horas (25 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:30/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.