Hi all,
I am generating HTML5 output with LiveCode (standalone HTML5).
In my application, I need to display bridge card suits.
The problem is the following:
♠ Spade, ♥ Heart and ♣ Club display correctly in HTML5
Only ♦ Diamond (Carreau) does not display correctly
The same code works perfectly in native applications (macOS / Windows).
In HTML5, the diamond is replaced by a strange character or ?, even when using Unicode or HTML entities.
For example, this code:
set the htmlText of field "entame" to "D♦"
still does not display a correct diamond symbol, while the other suits work as expected.
I have tried different approaches (Unicode, HTML entities, SVG), but the issue only affects the diamond suit.
Is there anything special about the ♦ diamond character in LiveCode HTML5 output?
Or is there a known limitation / workaround regarding fonts or HTML rendering?
Many thanks in advance for any help.
HTML5 output: Diamond suit (♦) does not display correctly, others do
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
Re: HTML5 output: Diamond suit (♦) does not display correctly, others do
I have no idea, but here is what ChatGPT thinks:
Craigin HTML5, is the "diamond" character reserved in some way, in that it cannot be properly displayed?
Short answer: no
There is no “diamond” character that’s reserved or forbidden in HTML5.
What does happen a lot is a classic encoding/font issue that looks like “HTML can’t display a diamond.”
The common confusion: the “diamond with a question mark” (�)
If you’re seeing a diamond shape with a ? inside, that character is U+FFFD (Replacement Character). It means:
“Something went wrong decoding this character.”
That’s not a reserved symbol—it’s a signal of an encoding mismatch.
Actual diamond characters that are perfectly valid
HTML5 supports all Unicode characters, including:
◆ BLACK DIAMOND — ◆ or ◆
◇ WHITE DIAMOND — ◇ or ◇
♦ BLACK DIAMOND SUIT — ♦ or ♦
⬥ BLACK MEDIUM DIAMOND — ⬥
All of these display fine if the font supports them.
Why diamonds sometimes don’t display correctly
Here are the usual culprits:
Wrong character encoding
Your document isn’t UTF-8, or the browser thinks it isn’t.
Fix:
<meta charset="utf-8">
Font doesn’t include that glyph
Many system or web fonts don’t support all Unicode symbols.
Try a broader font (e.g. Arial Unicode MS, Segoe UI Symbol, Noto Sans Symbols).
Bad copy/paste source
Copying from PDFs, Word, or legacy systems can introduce invalid byte sequences.
Server sends wrong encoding
HTTP header says ISO-8859-1 but the file is UTF-8.
Quick diagnostic trick
Try this minimal test file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
◆ ◇ ♦ ⬥
</body>
</html>
If that works, HTML is not the problem—encoding or font choice is.
Bottom line
Diamond characters are not reserved
Display problems = encoding or font, almost always
If you want, tell me which diamond you’re trying to show and what you’re seeing instead, and I’ll zero in on the exact fix.
Diamond characters are not reserved
Display problems = encoding or font, almost always-
richmond62
- Livecode Opensource Backer
- Posts: 10330
- Joined: Fri Feb 19, 2010 10:17 am
Re: HTML5 output: Diamond suit (♦) does not display correctly, others do
Thanks for the pointer.
Yes, I am using Unicode symbols, specifically the standard card suit characters from the Unicode block U+2600 / U+2660–2667 (♠ ♥ ♦ ♣).
What makes this issue confusing is that ♠, ♥ and ♣ display correctly in LiveCode HTML5 across platforms, while ♦ (U+2666, BLACK DIAMOND SUIT) does not, and is replaced by the Unicode replacement character (�).
I have verified that:
The HTML document is UTF-8 (<meta charset="utf-8">)
The same character displays correctly in native LiveCode
The issue only occurs in HTML5 output
The problem persists across different attempts (direct Unicode, HTML entities, different fonts)
Looking at the Unicode chart (https://www.unicode.org/charts/PDF/U2600.pdf), ♦ is clearly a valid and standard Unicode glyph. This suggests the issue is not Unicode itself, but rather font glyph coverage or font fallback behavior in LiveCode HTML5 / the browser environment.
In other words, the browser receives the correct code point, but the chosen font does not reliably provide the ♦ glyph, even though it provides the other three suits.
For now, I’ve decided to avoid relying on this glyph in HTML output, as it’s not 100% reliable across platforms, and use a fallback representation instead.
Thanks again for the suggestion — it helped confirm that this is a font/glyph issue rather than a reserved or invalid Unicode character.
Yes, I am using Unicode symbols, specifically the standard card suit characters from the Unicode block U+2600 / U+2660–2667 (♠ ♥ ♦ ♣).
What makes this issue confusing is that ♠, ♥ and ♣ display correctly in LiveCode HTML5 across platforms, while ♦ (U+2666, BLACK DIAMOND SUIT) does not, and is replaced by the Unicode replacement character (�).
I have verified that:
The HTML document is UTF-8 (<meta charset="utf-8">)
The same character displays correctly in native LiveCode
The issue only occurs in HTML5 output
The problem persists across different attempts (direct Unicode, HTML entities, different fonts)
Looking at the Unicode chart (https://www.unicode.org/charts/PDF/U2600.pdf), ♦ is clearly a valid and standard Unicode glyph. This suggests the issue is not Unicode itself, but rather font glyph coverage or font fallback behavior in LiveCode HTML5 / the browser environment.
In other words, the browser receives the correct code point, but the chosen font does not reliably provide the ♦ glyph, even though it provides the other three suits.
For now, I’ve decided to avoid relying on this glyph in HTML output, as it’s not 100% reliable across platforms, and use a fallback representation instead.
Thanks again for the suggestion — it helped confirm that this is a font/glyph issue rather than a reserved or invalid Unicode character.