'Left and right quotation mark render as unexpected character in Safari

I have a simple piece of text like so:

<h1 class="intro-text" id="main-title">&lsquo;AN ABRAM&rsquo;</h1>

This should render the following output (this is correct in Google Chrome):

Google Chrome

But when I open the same file in Safari the output looks like this:

Safari

Why is this happening and how do I make sure this doesn't happen?

htmltextutf-8html-entities


Solution 1:[1]

There may be a few issues of why your text is rendering differently in different browsers.

1. HTML charset not set to utf-8

This is a very common solution for your issue. Sometimes, the unexpected character rendering occurs when the charset isn't set to utf-8.

According to MDN Web Docs:

charset - This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8", because UTF-8 is the only valid encoding for HTML5 documents. <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.

In short, the charset attribute defines the character encoding, and what each character will "render" to.

To add this in your HTML, you need to add it in your <head>, like so.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1 class="intro-text" id="main-title">&lsquo;AN ABRAM&rsquo;</h1>
  </body>
</html>

This should state that the encoding of the HTML document should be UTF-8. This way, Safari shouldn't print out the characters in a different way.

Note: There are known issues of Safari encoding the text differently than Google Chrome, so this solution is most likely the best fix.

2. Fonts (OP's working solution)

Another issue that could occur is the fonts that have been chosen to be on the webpage.

Sometimes, fonts can be the reason Safari doesn't render the symbols like normal. This can be for many reasons.

However, to see if fonts are the issue, then you should remove all of the font-family specifications in your CSS.

* {
  font-family: "Some-Font"; /* Try and remove this */
}

The default font in a HTML document (if it isn't specified) is Times New Roman. If the issue doesn't occur after changing the font, then the issue was the font. In this case, you would need to find another font to be in your HTML document.

3. No DOCTYPE

The third issue in this list is no <!DOCTYPE html> at the start of your HTML.

Even though this solution may not be related to your issue, this is a good thing to try.

If you don't have the DOCTYPE, you need to add it in the location specified below.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Title!</h1>
  </body>
</html>

Shown on Line 1.

This may help solve the issue.

In conclusion, these are the three solutions. They are ranked from most likely to fix, from least likely to fix.

  1. HTML charset not set to utf-8
  2. Fonts (OP's working solution)
  3. No DOCTYPE

These should fix your problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions