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"></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.