2

I would like this character to appear on my website:

http://www.fileformat.info/info/unicode/char/fdfd/index.htm

I put this tag on the top of my page

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

And I tried the code &#65021; and &#xfdfd; but it just looks like a box on the site. How can I put this character on my website?

Thanks!

Edit: It shows up correctly on my phone, but not my Mac 10.6.8. How do I know which computers will support this character?

Improve this question
4
  • 1
    You need to make the page use a font which supports that character. On the site you linked, every version but the image showed up as ﷽. Commented Feb 6, 2015 at 1:37
  • 1
    The font that you are using may not support the particular characters thus the square where the letter should be. Commented Feb 6, 2015 at 1:38
  • It says Arial and Times New Roman work... Commented Feb 6, 2015 at 1:38
  • How do I find a font that supports it? Commented Feb 6, 2015 at 1:39

3 Answers 3

Reset to default
4

All the methods you have used are correct. Using the character ﷽ as such is correct too, provided that the HTML document is UTF-8 encoded and declared to be UTF-8 encoded. The &#65021; and &#xfdfd; notations work independently of character encodings (that’s one of the main reasons for using them).

However, it fails if none of the fonts in the user’s system contains a glyph for the character. Browsers then typically display a small rectangle to indicate this.

The font information page for the character at Fileformat.info has incorrect or incomplete information. If you click on the Local Font List link there, you should see the real situation in your system. In my system, a fairly normal Windows 7 with a fairly large collection of free fonts added, none of the fonts listed on the file info page except GNU Unifont actually contains U+FDFD ARABIC LIGATURE BISMILLAH AR-RAHMAN AR-RAHEEM. Perhaps the font support page was created in a system with versions of Arial, Times New Roman, etc., that differ from the normal fonts shipped with e.g. Windows 7.

What’s worse, the GNU Unifont glyph is hardly suitable for any real use. Being a coarse bitmap, it is totally inadequate for rendering a calligraphic character with a large number of details.

Microsoft Uighur has an appropriate glyph, but this font is not free, and there does not be any easily accessible information on terms for getting it legally for use as an embedded font (web font). There is also a font called Universalia, with information available in Russian only and of questionable legal status.

The following image shows examples of the character (in very large font size) in the fonts mentioned.

enter image description here

If you can see the character in iPhone, then obviously the iPhone has a font containing it, but most probably you cannot use that font as embedded.

Unfortunately, this appears to mean that you cannot use the character on a web page so that works for all users, or even the majority of users.

Update: The good news is that Google Fonts: Early Access contains a few fonts that contain the character and can be used as embedded fonts, either as hosted by Google or as hosted on your server. Beware that Early Access fonts are more or less experimental and that the shape of the character might not be suitable for your overall design and style.

In the following examples, I have included a short phrase in normal Arabic letters for comparison.

<style> @import url(http://fonts.googleapis.com/earlyaccess/amiri.css); @import url(http://fonts.googleapis.com/earlyaccess/notonaskharabic.css); @import url(http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css); </style> <p><span style="font-family: Amiri">&#xfdfd; السلام عليكم</span> (Amiri) <p><span style="font-family: Noto Naskh Arabic">&#xfdfd; السلام عليكم</span> (Noto Naskh Arabic) <p><span style="font-family: Noto Nastaliq Urdu Draft">&#xfdfd; السلام عليكم</span> (Noto Nastaliq Urdu Draft)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Great information! Thanks! Is there any way to include the superset of Arial I need in a link tag like I normally do with google fonts? (Forgive me...I don't really understand very well how fonts work)
Good question! At least the Google Early Access font Amiri has this character. I'll check some other fonts there are update my answer.
0

Make sure that your code editor saves your file in utf-8 encoding.

Improve this answer

Comments

0

Heya any chance your font does not support the character? I tested with the below works fine. 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p style="font-family: arial, helvetica, sans-serif;">&#xfdfd;</p> </body> </html>

EDIT: Loaded Arial, Helvetica stack and seems fine. Also make sure your text editor is saving the file utf 8 encoded ( as mentioned above )

Improve this answer

5 Comments

Hm...shows up as a box on my computer even if I copy and paste your HTML code.
strange, working cross browsers here fine. maybe try another character that is pretty common: &AElig; &AElig;
If you right click inspect the element on page is it using another font family or something like that?
Inspect element shows just the declared font family, not the one actually used. Some browsers have add-ons for checking the actual font, like Font Information 0.1 for Firefox.
One other option would be to add it as an SVG to a custom font on app.fontastic.me then use that.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.