So I have discovered that some HTML editors are a little zealous in converting entity codes to characters. Fortunately, this turned out to be an opportunity for me to learn more about how zero-width characters operate. I’m also getting to revisit recursion in how to explain this with HTML code

I’m trying to display some entity character codes in a CMS (e.g. &‌#11497; = ⳩ (Coptic Chi-Rho) and more importantly &amp; = &).

As most of you will know, HTML entity codes all begin with the & (ampersand) and end with a ; (semicolon)

In order to display what an entity code should be on a Web page, you can’t just write the entity code because the browser will convert that to the character. Thus:

HTML
&‌#11497;
will result in

In my old Dreamweaver only Web 1.0 site, I could avoid this by ensuring that when I needed to display an ampersand, I used the escape code for the ampersand in the HTML. Thus:

HTML
&amp;‌#11497;
will result in
&‌#11497;

AND

HTML
&amp;amp;‌#11497;
will result in
&amp;‌#11497; (the code to show the code)

Getting the entity codes to not convert a code to a character in HTML requires an entity code for the ampersand to be embedded. And if you want to display the HTML code for that in HTML you need to add another <b class="fakecode"<amp; which is where recursion (nesting the same code) happens. I’m going to stop now.

## Overly Ambitious CMS and ZWNJ

The above techniques work in most Web 1.0 systems, but some modern systems are a little too smart and will convert both &‌#11497; AND &amp;‌#11497; to the Coptic Chi Rho.

Fortunately, I was able to use the Zero-width non-joiner to block the conversion. Normally this character is used in languages like Arabic to block ligature formation of successive letters, but it turns out to be useful here as well. The entity code for this is &‌zwnj;

That means that:

If you want to display &‌#11497; on a Web page, your code will look like:

&‌amp;&‌zwnj;#11497;

And the code for &‌amp;&‌zwnj;#11497; will look like…I’ll let you figure that out.

Share →