Cómo representar fracciones en HTML

Escrito por sue smith Google | Traducido por juliana star
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo representar fracciones en HTML
Representar símbolos matemáticos en HTML es un poco más difícil que hacerlo en un pizarrón. (Hemera Technologies/AbleStock.com/Getty Images)

Representar fracciones en una página web es diferente a escribirlas a mano. A menos que utilices una técnica dedicada, al mostrar fracciones en HTML éstas simplemente aparecerán como números normales con una diagonal entre ellos. Existen diversas técnicas para mostrar fracciones en su estilo y formato matemático más aceptado, todas ellas simples y fáciles de usar. La aproximación que tomes dependerá del rango de fracciones que quieras mostrar.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Representa tus fracciones usando sus entidades HTML. Un pequeño conjunto de fracciones se incluye dentro del juego de caracteres ISO-8859-1, el cual se usa de forma predeterminada dentro de la mayoría de los navegadores web. Escribe estas fracciones específicas usando un simple fragmento de código. Puedes hacer referencia a un símbolo de fracción en HTML usando su número de entidad o su nombre. Por ejemplo, el símbolo de fracción para "un cuarto" puede insertarse en una página HTML usando alguno de los siguientes fragmentos de código: ¼ ¼

  2. 2

    Despliega fracciones que no estén contenidas dentro del juego predeterminado usando el marcado HTML. Las etiquetas HTML "sup" y "sub" indican al texto que debe aparecer como superíndice y subíndice, respectivamente. Por lo tanto puedes usar estas etiquetas para construir fracciones no contenidas dentro del conjunto normal de símbolos de las páginas HTML. Para representar la fracción "seis séptimos", por ejemplo, usa lo siguiente: <sup>6</sup>/<sub>7</sub>

    Si bien esto se aproxima visualmente a la notación matemática normal, no es exactamente lo mismo.

  3. 3

    Usa una combinación de HTML y CSS para mostrar tus fracciones. En vez de usar las etiquetas HTML de superíndice y subíndice, puedes llegar a algo más cercano a la representación estándar de fracciones usando marcado HTML en conjunto con código CSS. Para mostrar la fracción "dos sextos" de esta forma comienza usando el siguiente código de marcado HTML: <span class="top">2</span>&#8260;<span class="bottom">6</span>

    El elemento superior y el inferior de la fracción se encuentran listados con diferentes atributos de clase, mientras que la diagonal de la fracción se indica usando el número de entidad HTML dedicado para ese tipo de carácter. Este código HTML por sí solo no es suficiente para darle formato a la fracción a mostrar, por lo que también necesitas código CSS que te proporciona un control de formato más poderoso.

  4. 4

    Crea un código CSS para mostrar tus fracciones. Dentro de tus declaraciones de estilo en la misma página o en una hoja de estilo diferente escribe las siguientes declaraciones: .top { font-size: 70%; vertical-align: 0.7ex; } .bottom { font-size: 70%; vertical-align: -0.3ex; }

    Estas declaraciones indican que los caracteres deben ser colocados en una posición definida dentro de la línea en la que aparecen, creando la apariencia de una fracción.

  5. 5

    Usa diferentes técnicas dentro de tu página y pruébalas en tu navegador. Decide qué método prefieres y emplea el mismo para todas las fracciones de tu página. Si tienes una mezcla de fracciones, de las cuales algunas no tengan referencia al usar entidades HTML, cambia todas para usar la misma técnica. Esto le dará a tu página una apariencia consistente y legible.

Consejos y advertencias

  • No te preocupes si sientes que tus fracciones no tienen una apariencia perfecta. Mientras los usuarios puedan comprender el texto tu mensaje será comunicado efectivamente.
  • Quizá descubras que tus fracciones aparecen de forma diferente en distintos navegadores web y en diferentes plataformas, por lo que es vital realizar pruebas exhaustivas.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles