I’m struggling to show combining characters on a page in a
consistent way across browsers.
For example, while laying out my pickers, I want users to
be able to click on a representation of a character to add it to
the output field. In the past I resorted to pictures of the
characters, but now that webfonts are available, I want to replace
those with font glyphs. (That makes for much smaller and more
Take the Bengali picker that I’m currently working on. I’d like
to end up with something like this:
I put a no-break space before each combining character, to give
it some width, and because that’s what the Unicode Standard
Exhibiting Nonspacing Marks in Isolation). The result is close
to what I was looking for in Chrome and Safari except that you can
see a gap for the nbsp to the left.
But in IE and Firefox I get this:
This is especially problematic since it messes up the overall
layout, but in some cases it also causes text to overlap.
I tried using a dotted circle Unicode character, instead of the
no-break space. On Firefox this looked ok, but on Chrome it
resulted in two dotted circles per combining character.
I considered using a consonant as the base character. It would
work ok, but it would possibly widen the overall space needed (not
ideal) and would make it harder to spot a combining character by
shape. I tried putting a span around the base character to grey it
out, but the various browsers reacted differently to the span.
Vowel signs that appear on both sides of the base character no
longer worked – the vowel sign appeared after. In other cases, the
grey of the base character was inherited by the whole grapheme,
regardless of the fact that the combining character was outside the
span. (Here are some examples কে and
In the end, I settled for no preceding base character at all.
The combining character was the first thing in the table cell or
span that surrounded it. This gave the desired result for the font
I had been using, albeit that I needed to tweak the occasional
character with padding to move it slightly to the right.
On the other hand, this was not to be a complete solution
either. Whereas most of the fonts I planned to use produce the
dotted circle in these conditions, one of my favourites
(SolaimanLipi) doesn’t produce it. This leads to significant
problems, since many combining characters appear far to the left,
and in some cases it is not possible to click on them, in others
you have to locate a blank space somewhere to the right and click
on that. Not at all satisfactory.
I couldn’t find a better way to solve the problem, however, and
since there were several Bengali fonts to choose from that did
produce dotted circles, I settled for that as the best of a bad
However, then i turned my attention to other pickers and tried
the same solution. I found that only one of the many Thai fonts I
tried for the Thai picker produced the dotted circles. So the
approach here would have to be different. For Khmer, the main
Windows font (Daunpenh) produced dotted circles only for some of
the combining characters in Internet Explorer. And on Chrome, a
sequence of two combining characters, one after the other, produced
two dotted circles…
I suspect that I’ll need to choose an approach for each picker
based on what fonts are available, and perhaps provide an option to
insert or remove base characters before combining characters when
someone wants to use a different font.
It would be nice to standardise behaviour here, and to do so in
a way that involves the no-break space, as described in the Unicode
Standard, or some other base character such as – why not? – the
dotted circle itself. I assume that the fix for this would have to
be handled by the browser, since there are already many font cats
out of the bag.
Does anyone have an alternate solution? I thought I heard
someone at the last Unicode conference mention some way of
controlling the behaviour of dotted circles via some script or font
Marc Durdin’s blog for more on this topic, and his experiences
while trying to design on-screen keyboards for Lao and other