I had a fella email me a line of text almost just like this:<\/p>\n\n\n\n
\n\ud835\udc02\ud835\udc1a\ud835\udc25\ud835\udc25\ud835\udc1e \ud835\udc01\ud835\udc25\ud835\udc1a\ud835\udc27\ud835\udc1c\ud835\udc28\ud835\udc2c, \ud835\udc02\ud835\udc28\ud835\udc2c\ud835\udc2d\ud835\udc1a \ud835\udc11\ud835\udc22\ud835\udc1c\ud835\udc1a<\/p>\n<\/blockquote>\n\n\n\n
He said he could not<\/em> remove that formatting no matter what he did. It looks kinda bold, doesn’t it? And set into a serif font. You’d think you could select it in the text editor you’re in and remove that formatting. He said he tried copy\/pasting it into places where no text formatting is even allowed, like in VS Code or the URL bar of a browser. Voodoo, he said.<\/p>\n\n\n\n
Here’s the thing: that text isn’t<\/em> formatted. <\/p>\n\n\n\n
That first “C” you see above isn’t a regular uppercase character C, our typical friend
U+0043 : LATIN CAPITAL LETTER C<\/code>, it’s “\ud835\udc02”<\/a>, that is,U+1D402 : MATHEMATICAL BOLD CAPITAL C<\/code>. It’s literally a different character in Unicode. There are… a lot of Unicode characters:<\/p>\n\n\n\n\nAs of Unicode<\/a> version 16.0, there are 155,063 characters<\/a> with code points<\/a>, covering 168 modern and historical scripts<\/a>, as well as multiple symbol sets.<\/p>\nList of Unicode characters<\/a> \u2014 Wikipedia<\/cite><\/blockquote>\n\n\n\n
It could be written like \ud835\udd6e\ud835\udd86\ud835\udd91\ud835\udd91\ud835\udd8a \ud835\udd6d\ud835\udd91\ud835\udd86\ud835\udd93\ud835\udd88\ud835\udd94\ud835\udd98, \ud835\udd6e\ud835\udd94\ud835\udd98\ud835\udd99\ud835\udd86 \ud835\udd7d\ud835\udd8e\ud835\udd88\ud835\udd86 instead, or \ud835\uddd6\ud835\uddee\ud835\uddf9\ud835\uddf9\ud835\uddf2 \ud835\uddd5\ud835\uddf9\ud835\uddee\ud835\uddfb\ud835\uddf0\ud835\uddfc\ud835\ude00, \ud835\uddd6\ud835\uddfc\ud835\ude00\ud835\ude01\ud835\uddee \ud835\udde5\ud835\uddf6\ud835\uddf0\ud835\uddee. <\/p>\n\n\n\n
Should you do this to get super sweet effects in places you otherwise couldn’t? Probably not. The accessibility is rough. Listen to the audio output in this blog post<\/a>.
If you’re going to do it on the web where you have HTML control, do something like:<\/s> <\/p>\n\n\n<!-- Don't do this! Leaving for posterity. --><\/span>\n<span<\/span> aria-label<\/span>=\"Calle Blancos, Costa Rica\"<\/span>><\/span>\n <span<\/span> aria-hidden<\/span>=\"true\"<\/span>><\/span>\ud835\udd6e\ud835\udd86\ud835\udd91\ud835\udd91\ud835\udd8a \ud835\udd6d\ud835\udd91\ud835\udd86\ud835\udd93\ud835\udd88\ud835\udd94\ud835\udd98, \ud835\udd6e\ud835\udd94\ud835\udd98\ud835\udd99\ud835\udd86 \ud835\udd7d\ud835\udd8e\ud835\udd88\ud835\udd86<\/span<\/span>><\/span>\n<\/span<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nUPDATE: See Ben’s comment<\/a> on why not to do the above. Instead, make a visually hidden version<\/a> that a screen reader would still see, and an ARIA hidden one that will be seen visually. (Noting potential concerns about copy\/paste that started this whole article.)<\/p>\n\n\n
<span<\/span> class<\/span>=\"visually-hidden\"<\/span>><\/span>Calle Blancos, Costa Rica<\/span<\/span>><\/span>\n<span<\/span> aria-hidden<\/span>=\"true\"<\/span>><\/span>\ud835\udd6e\ud835\udd86\ud835\udd91\ud835\udd91\ud835\udd8a \ud835\udd6d\ud835\udd91\ud835\udd86\ud835\udd93\ud835\udd88\ud835\udd94\ud835\udd98, \ud835\udd6e\ud835\udd94\ud835\udd98\ud835\udd99\ud835\udd86 \ud835\udd7d\ud835\udd8e\ud835\udd88\ud835\udd86<\/span<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"\ud835\udc0f\ud835\udc28\ud835\udc2d\ud835\udc1a\ud835\udc2d\ud835\udc28 is not just Potato formatted.<\/p>\n","protected":false},"author":1,"featured_media":4734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[31,39,268],"class_list":["post-4666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-html","tag-typography","tag-unicode"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/12\/unicode.png?fit=1118%2C722&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=4666"}],"version-history":[{"count":9,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4666\/revisions"}],"predecessor-version":[{"id":4741,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4666\/revisions\/4741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4734"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=4666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=4666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=4666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}