1

He estado desarrollando una webapp con el fin de automatizar el repertorio que se va a cantar cada domingo en la Eucaristía de mi parroquia. Tengo los cantos separados en pdfs, y básicamente así funcionaba: mediante un formulario se recogen los cantos, se almacenan en una base de datos, y posterior a ello con lo ingresado se hace una consulta a la base de datos me traiga la url del pdf en drive, y mediante un iframe visualizaba el pdf. El problema es que usaba tanto las etiquetas <embed> y <iframe> para la visualización pero en algunos dispositivos no se veía, se quedaba cargando, así que tome la decisión de pasar los cantos (casi 200) en formato html con el fin de que el resultado de la consulta sea el html del canto, pero el problema que tengo ahora es que según el dispositivo (android) o (ios) me está corriendo los acordes a diferentes posiciones, pero necesito "amarrar" el acorde a la letra, porque de lo contrario los músicos entrarían con acordes en momentos distintos y eso sería un gran problema.

Para ejemplificar un poco más, así es como se debería ver: introducir la descripción de la imagen aquí

El código como lo tengo, es simple; para esos espacios entre los acordes he creado la cantidad de espacios necesarios " &.nbsp; " , es decir, si el primer acorde es "Em" y en la sílaba guía entra el acorde "E7" he puesto x cantidad de espacios, pero en los dispositivos a veces cambia de letra o tamaño de fuente y por tanto se desordena.

Así se ve en android y ios: introducir la descripción de la imagen aquí como se ve en ios introducir la descripción de la imagen aquí

¿Cómo hago para "amarrar" el acorde a la sílaba, de tal manera de independientemente el dispositivo o si se aumenta o disminuye la fuente o cambia la fuente, siga permaneciendo encima de la sílaba en donde se cambia de acorde?

La referencia es la página lacuerda.net, quienes manejan. Ejemplo:

introducir la descripción de la imagen aquí Muchas Gracias, espero me puedan ayudar.

3
  • Y el problema es precisamente que has decidido añadir números aleatorios de espacios entre palabras. Personalmente, yo habría seguido con la idea del PDF y te evitas tocar el formato. Si insistes en hacerlo en HTML te recomiendo que uses una estructura que realmente se pueda mantener sin importar el ancho de la pantalla. Cuando necesites mostrar un texto encima de otro, utilizas un único div con dos textos dentro y con display: flex; flex-direction: column deberían mantenerse siempre uno encima de otro. Eso o intenta meter toda tu estructura actual entre tags <pre>HTML aquí</pre>
    – Benito-B
    Commented el 26 jun. a las 13:14
  • Personalmente considero que lo mejor habría sido hacer una estructura correcta desde el principio, alinear las cosas con espacios no es viable. Pero los tags pre deberían mantener la cantidad de espacios correctamente, unido a una fuente monoespaciada (que todos los símbolos ocupen exactamente el mismo ancho) podría ser una solución aceptable. Sigue gustándome más la idea de usar pdfs sin más, usando alguna librería que te gestione la carga y alojándolos en el disco duro y no un pendrive.
    – Benito-B
    Commented el 26 jun. a las 13:16
  • Aunque la respuesta de @Yuseff es buena, veo muchísimo trabajo para cada canto y nada de escalabilidad en eso. Porqué no pruebas otras formas de ver los PDF?? También se me ocurre una imagen (del PDF) por cada canto, por lo menos así no habrá dispositivo que te de problemas con las etiquetas <img>
    – OCHOA
    Commented el 26 jun. a las 16:21

1 respuesta 1

1

Puedes usar un elemento data y asocias una (o más) letras a un acorde. Luego con un poco de CSS posicionas el acorde

p{
  padding: 20px 8px;
  font-size: 1.2em;
}
data{
  position:relative;
}
data:after{
  content: attr(value);
  position:absolute;
  top: -20px;
  left:0;
  font-size: 1.2em;
  color: blue;
}
<p>
<data value="EM">Ac</data>lamad a Dios con aleg<data value="E7">r</data>ia toda la <data value="AM">t</data>ierra &nbsp;<data value="D7"></data>
</p>

1
  • Yussef, creo que con esta solución pone a trabajar un poco en los archivos individualmente pero en efecto posiciona el acorde sobre la frase puntual y ya cambié fuentes y la escala y se sigue manteniendo. Dios te bendiga. Commented el 26 jun. a las 17:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.