Drawing sharp and flat symbol?

I’m trying to add musical symbos for sharp and flat using Unicode symbols 0x266d and 0x266f, but can’t seem to figure out how to get those to show. When I inspect my text in Xcode, it does show the sharp or flat symbol, but when I call drawText with the string that contains it, all I get is the note name, and no symbol following it. I saw this thread:
https://forum.juce.com/t/musical-sharp-and-flat-symbols/3655/2

but I tried using Lucida Grande (on a Mac), and it still doesn’t show the symbols.

I modify string like “Fb” or “F#” using this code:

symbol = symbol.replaceCharacter(0x0023,0x266f);
symbol = symbol.replaceCharacter(0x0062,0x266d);

And after doing so, I can see that the # or b have been replaced by the symbol. But when I later call this code, the symbol does not show up, even though I can inspect the symbol String, I can see it has the symbol.

g.setFont(juce::Font("Lucida Grande", 64.0f, juce::Font::plain));
g.drawText(symbol, getLocalBounds(), juce::Justification::centred);

I saw some rather complex code related to the Look&Feel and loading fonts and a lot of stuff about UTF8, etc., but is any of that really needed? If Xcode can figure out that the symbol is correct, why does it not show when simply passing it to drawText()?

1 Like

This works for me:

g.setFont(juce::Font("Apple Symbols", 32.0f, juce::Font::plain));
g.drawText(juce::CharPointer_UTF8("F♯♭𝄪𝄫"), rect, juce::Justification::centred);

Note that Lucida Grande doesn’t actually have the sharp or flat signs in it. Helvetica Neue does have sharp and flat but not double sharp or double flat.

2 Likes

I have a class that calls drawText using a juce::String. Does the above mean I have to change the class to use a CharPointer_UTF8 instead of a String? Other projects use this class, and I don’t want to break what they are already using to show the given note name.

Is there one for Windows? Better yet, a san-serif font that is available on BOTH platforms that has those?

1 Like

This code works, but only for Apple Symbols as far as I have found so far:

	juce::CharPointer_UTF8 utfSymbol(symbol.toUTF8());
	if (symbol.length()==2)
	{
		if (symbol[1] == 'b')
		{
			symbol = symbol.substring(0, 1);
			symbol += "\xe2\x99\xad";
			juce::CharPointer_UTF8 s(symbol.toUTF8());
			utfSymbol = s;
		}
		else if (symbol[1] == '#')
		{
			symbol = symbol.substring(0, 1);
			symbol += "\xe2\x99\xaf";
			juce::CharPointer_UTF8 s(symbol.toUTF8());
			utfSymbol = s;
		}
	}
	g.drawText(utfSymbol, getLocalBounds(), juce::Justification::centred);

2 Likes

A juce::String can be created from a CharPointer_UTF8 so you can still use your string-based approach.

As for the font, it’s a good idea to look for a custom font anyway and bundle that with the plug-in (in the binary data) so that your plug-in has a unique style. For example, DejaVu Sans, which has the sharp and flat symbols.

2 Likes