Question 379960 in CSS Question posted in
Some basic documentation can be found here.

How to apply CSS to musical accidentals?

This is in a small html file:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
<p>html code: C♯ C♭ C♮ or paste: sharp (C♯), flat (C♭), natural (C♮)</p>

In FF on PC both ways look fine. But in Android and Safari the Flat and Natural are badly kerned in all fonts I tried. To debug this I removed all font-family specifications and added color in CSS:

p {color:red;}

In FF/PC everything is red but elsewhere the Sharp is red but Flat and Natural stay black.

  1. Does this mean that in Android and Safari #9837 #9838 do not render in the default font but #9839 does so?
  2. What font should I use to render the three accidentals on the three platforms?

(NB I’m aware of all kinds of sofisticated solutions (html5, xml) but I have allready automated the writing of the html’s so a pure CSS solution is welcomed)

(NB2 in the newest version of Safari all three are red but the bad kerning stays the same)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After some debugging an answer is: avoid using accidentals in UTF-8. The high codepages are not consistently implemented on different platforms.

    In chord symbols the Natural is not needed. With this CSS the result looks fine for ASCII '#' and 'b' if you don't need italic elsewhere (otherwise use a class):

    p { font-size: 13px;}
i { font-size: 10px;}

    ... or other convenient relative or absolute sizes depending on the font-family.

    With this CSS, HTML chord symbols are looking good on PC, Android and iPad:

    A<i>#</i>7  B<i>b</i>6

  2. 0

    I don’t know if any of these will be useful to you specifically, but I put these possible solutions together for you to try out:

    text-rendering CSS property

    • The text-rendering CSS property controls how text is rendered.

    • By default, Safari uses optimizeSpeed, which prioritizes rendering speed over legibility.

    • To improve legibility, try setting text-rendering: optimizeLegibility; for the affected elements.

    Font Selection

    • Some fonts may render better than others across various platforms.

    • Consider using web-safe fonts or fonts that are known to have consistent rendering across browsers.

    • Test different fonts to find one that works well for your musical symbols.

    Web Fonts

    • If you’re using custom fonts (web fonts), ensure that all necessary font formats (e.g., WOFF, TTF, SVG) are included.

    • Check if the correct font files are being applied by inspecting the network requests in the browser’s developer tools.

    Fallback Fonts

    • Specify fallback fonts in your CSS to ensure consistent rendering.

    For example: .your-class {font-family:'YourCustomFont', Arial, sans-serif;}

    Font Features

    • Some fonts include special features like kerning and ligatures.

    • Ensure that the font you’re using supports these features.

    • You can enable kerning explicitly using –webkit-font-feature-settings: "kern";

    Font Services

    • Consider using font services like Google Fonts or Typekit, which handle cross-browser compatibility and font delivery. Font Awesome is another option you could use.

    Fallback Symbols

    • You could also try using fallback symbols, like Unicode characters that are more universally supported.

    • For musical symbols, Unicode offers many symbols like ♯, ♭, and ♮

    If all of those do not work for you, you could try a more advanced approach, and detect the user agent (client/browser) and apply specific CSS depending on what the user agent may be using.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search