Añadir tipografía externa en editor de texto

Home Forums Ayuda / Ajuda / Laguntza / Axuda / Help Añadir tipografía externa en editor de texto

This topic contains 11 replies, has 4 voices, and was last updated by  Ignacio Gros 1 year, 3 months ago.

  • Author
    Posts
  • #27795

    paavoerbau
    Member

    Primero de todo, como usuario nuevo, un saludo a tod@s. Soy profesor de música en Galicia y estoy elaborando unos materiales en exelearning donde me gustaría añadir a los textos símbolos musicales, con dos tipografías creadas por un compañero.
    Estoy viendo en la web que en html se pueden utilizar fuentes incrustadas pero quizá exista una forma más fácil personalizando el editor o quizá de otra forma.
    He visto que usuarios de otras comunidades han editado un estilo para escribir en Chino pero yo necesito escribir signos aislados (cifrados melódicos, cifrados armónicos etc) mezclados con texto común.
    ¿Alguna idea o tendré que usar imágenes, aunque afean mucho el aspecto final?
    Un saludo y gracias

  • #27809

    Ignacio Gros
    Member

    Si vas a usar una tipografía, la manera de hacerlo es esa:

    • Usas @font-face en tu Estilo para importar la fuente (en el archivo content.css).
      La fuente debe estar en tu Estilo o en una URL pública si sabes que los contenidos van a verse con conexión a Internet.
    • Luego das una clase al elemento (DIV o lo que sea) que contiene tus notas y aplicas esa tipografía a los elementos con esa clase (también en content.css).

    Otra opción es usar ABCJS. Adjunto un ejemplo que hace esto:

    • En un iDevice Nota añadimos un enlace al archivo necesario (ese iDevice no se verá al exportar, pero los archivos enlazados desde el mismo se incluirán en la exportación).
    • Luego vas a Propiedades – Pie de página y añades el JavaScript del ejemplo, que carga ese JavaScript y hace que funcione.
    • Para añadir notación musical tienes que añadir una etiqueta PRE con la clase “music-notes”.
    • En esa etiqueta PRE puedes usar notación musical ABC.

    Eso, pero sin tener que hacer las cosas a mano, sino simplemente copiando y pegando el código, estará disponible en próximas versiones de eXe.

    Si la solución de la tipografía os parece más cómoda o mejor por algún motivo, os animo a compartirla.

    Si quieres que las notas se muestren más pequeñas sustituye la línea que empieza por ABCJS.renderAbc por:

    ABCJS.renderAbc(this.id, this.innerHTML);

    Espero que te sirva.

    Saludos.

    Attachments:
    You must be logged in to view attached files.
  • #27816

    paavoerbau
    Member

    Muchas gracias por la rápida respuesta.
    Es muy interesante ese recurso de ABCJS que no conocía. Hasta ahora usábamos soluciones como incrustar partituras desde Noteflight o musescore.
    Ese código de ABCJS me recuerda mucho a Lilypond, editor musical basado en código del tipo \relative c’ {
    c d e f
    g a b c
    }

    En todo caso mi consulta es por algo diferente.
    En un texto normal tengo que incluir numeración con acentos circunflejos, sobre todo, y otros símbolos de un sólo caracter. Como no existe, que yo sepa, la opción del nº circunflejo, echo mano de una tipografía ad-hoc.
    Un ejemplo de texto sería:
    “No primeiro dos seguintes exemplos a ausencia do son mais importante, o número 1, é o que xera ambigüidade tonal nunha melodía moi estática, xa que só utiliza só os sons 3, 4 e 5 da escala.”
    Donde aparecen números debería poner esa tipografía.

    De tu primera propuesta comprendo los dos primeros puntos pero no el tercero. ¿Como aplico la tipografía al texto una vez modificado content.css y poner online la fuente?

    Muchas gracias por tu tiempo y un saludo

  • #27823

    Ignacio Gros
    Member

    Una vez que tienes la fuente en tu Estilo y la incluyes en content.css con @font-face, puedes hacer que la usen los elementos que tengan una determinada clase.

    Si esa clase fuera “music-no” y quieres que esos elementos usen la tipografía ‘paavoerbau’, por ejemplo, añadirías esto en content.css:

    .music-no{
    font-family:'paavoerbau';
    }

    Después, en el editor de eXe, seleccionas el texto (el número o lo que sea) y vas a Editar – Insertar/Editar atributos, y donde pone Clase CSS escribes “music-no”.

    Espero que te sirva.

    ¡Gracias por los enlaces!

  • #27985

    paavoerbau
    Member

    Hola de nuevo:
    Todo este tiempo lo he estado probando, con mis escasos conocimientos de programación, buscando ayuda en internet e intentando no dar la lata más de lo debido.
    No lo he conseguido.
    He pegado en content.css lo siguiente:

    @font-face {
          font-family: “Scale Degrees";
            src: local(“Scale Degrees"),
      local(“ScaleDegrees (Times).ttf”),
      url(ScaleDegrees (Times).ttf);
        }
        
        body { font-family: “Scale Degrees", serif }
    .music-no{
    font-family:’Scale Degrees’;
    }
    

    Desde el editor he seguido tus indicaciones y he puesto “music-no” en el campo Clase CSS.
    Incluso lo he subido a una web online poniendo el archivo de la tipografía.
    Supongo que es algún error de sintaxis o que el nombre del tipo de letra (aunque he probado cambiar los espacios en blanco por _
    No sé. Si tienes alguna idea será bienvenida sino tendré que buscar otra solución.

    Al respecto de ABCJS me está interesando mucho pero quería hacerte dos preguntas:
    En el archivo que adjuntaste no se reproduce via MIDI ¿Se puede arreglar?
    Desde tu archivo he podido crear otras partituras pero si intento crear un elp nuevo y siguiendo tus instrucciones no lo consigo.
    Te envío un archivo por si no te importa molestarte un momento y ver en que me he equivocado.

    Attachments:
    You must be logged in to view attached files.
  • #28078

    paavoerbau
    Member

    Hola de nuevo:
    He solucionado el problema con ABCJS. No incluía en el paquete el script abcjs_basic_midi_3.1.1-min

    Ahora se ven pero no se oyen. Estuve fisgando por internet al respecto y parece que hay que incluir algún script específico para la reproducción MIDI y un directorio con Soundfonts.
    Como me parece complicado simplifico poniendo un enlace al MIDI que he generado.

    Ahora mismo el único problema que sigo sin resolver, y es el inicial y más importante, el de la tipografía.
    Cruzo los dedos.
    Saludos

  • #28086

    Ignacio Gros
    Member

    Hola.

    Para la tipografía lo mejor es que mires cómo está en el Estilo Kids (está en la carpeta “style” del directorio en el que tengas instalado eXe). Verás que en content.css (justo al principio) hace uso de @font-face para incluir la tipografía, que se encuentra en la misma carpeta (igual es eso lo que te falta). Verás que en ese Estilo hay varias tipografías, como open-sans.woff2.

    Luego, en ese mismo archivo, hace uso de la tipografía incluida (usa el nombre que le hayas puesto en @font-face): ‘Open Sans’ en el Estilo Kids (línea 15 de content.css).

    Es posible que no te funcione partiendo de cero porque falte el archivo abcjs_basic_midi_3.1.1-min.js (el problema del elp que me has mandado es ese). Ese sí que tiene que estar en el paquete. En mi ejemplo lo he incluido añadiendo un enlace al mismo usando el iDevice Nota, cuyos archivos se exportan aunque el iDevice no se muestre en las páginas. [Creo que esto ya lo has resuelto]

    Espero que lo consigas.

    Sobre la reproducción de audio con abcjs:

    Puedes incluir, como se hace en los ejemplos de su web, el archivo acoustic_grand_piano-ogg.js en la misma carpeta.

    Eso también se hará en eXe de una manera sencilla dentro de poco.

    Saludos.

    • This reply was modified 3 years, 1 month ago by  Ignacio Gros.
  • #28140

    paavoerbau
    Member

    Parece que por fin he solucionado lo de la tipografía.
    Como creí que estaba haciendo todo bien y no funcionaba decidí convertir el archivo de tipo de letra mediante la página web:
    https://www.fontsquirrel.com/tools/webfont-generator
    ¡Impresionante! No sólo te convierte el tipo de letra sino que genera una página web de muestra con su css y puedes copiar el código tal cual.
    Se la recomiendo a todos los que necesiten incrustar tipografía en su web. Te lo facilita muchísimo.
    Mi problema estaba, muy proobablemente, en el formato de la fuente o en el nombre de su archivo.
    Al generar una página de prueba copié el nombre que aparece y el nombre del archivo y todo funcionó.

    El segundo tema, el de usar MIDI con ABCjs ya no es lo mismo.
    Segui tus consejos y coloqué el archivo acoustic_grand_piano-ogg.js en la misma carpeta.
    Evidentemente eso no es suficiente.
    De algún modo habrá que indicar la aparición de un reproducrtor MIDI y que algún script convierte el lenguaje ABC a lenguaje MIDI y lo enrute hacia el reproductor y este sepa buscar el archivo con los soundfonts.

    Supongo.
    Pero no he conseguido desentrañar como hacerlo a pesar de haber encontrado la página http://abcnotation.com/blog/2013/04/10/the-problem-with-midi/ en la que se habla de este problema.
    En fin, lo más importante arreglado y lo del ABCjs no creo que lo logré antes del plazo de entrega que es el 8 de Junio.

    Muchas gracias

    • #28180

      Ignacio Gros
      Member

      Hola.

      Veo que la fecha de entrega ya ha pasado. Espero que te sirviera con lo que conseguiste. Para hacer que funcione el MIDI sí hay que hacer algún cambio más.

      Espero que eXe lo incluya de serie pronto.

    • #29473

      Estefany
      Member

      ¡Muchas gracias! Esta respuesta me salvó, porque estaba usando fuentes TTF. Aparentemente debes converfirlas a WOFF y WOFF2 para que funcione.

  • #30768

    Hola, me podrían compartir un paso a paso de ¿cómo añadir tipografía externa al estilo creado? Ya tengo las fuentes en woff y woff2.

     

    Gracias

    • #30777

      Ignacio Gros
      Member

      Hay un ejemplo en el Estilo Kids:

      – Se incluye la tipografía en el Estilo (en el caso de Kids, hay varios archivos: open-sans.woff, etc.).
      – Se importa la tipografía en el fichero content.css del Estilo usando @font-face (más información sobre @font-face).
      – Se define la familia de fuente con CSS. Ejemplo: body{font-family:'Open Sans',Arial,Verdana,Helvetica,sans-serif}

      Espero que te sirva.

You must be logged in to reply to this topic.