CSS rules for font-based character display

Two things need to be specified in order to render <g> character references with a font:

  • the name of the font
  • the characters to display

If the characters are provided as text content of the <g> element (e.g. <g ref="http://edirom.de/smufl-browser/_graceNoteAcciaccaturaStemUp.xml">&#xE560;</g>), you only need to specify the font in CSS. The following rule assigns the font 'BravuraText' to all <g> elements with a @ref attribute starting with "http://edirom.de/smufl-browser" or "s:":

g[ref^="http://edirom.de/smufl-browser"], g[ref^="s:"] {
    font-family: "BravuraText";
    font-style: normal;
    font-weight: normal;
}

(Note: oXygen doesn't seem to be able to load the BravuraText font when it's referenced in a @font-face rule. If you want to use the font in oXygen's Author Mode, install it as a system font instead.)

When <g> elements are encoded as empty elements (which is recommended), code points can be provided character-wise in pure CSS. A rule to render <g ref="s:_graceNoteAcciaccaturaStemUp"/> might look like:

g[ref="s:_graceNoteAcciaccaturaStemUp"]:before {
    font-family: "BravuraText";
    font-style: normal;
    font-weight: normal;
    content: "\00E560";
}

A simple XSLT can be used to automatically extract CSS rules of this kind for all character declarations in a file.