Mysterious X symbol in Mac Safari HTML

Question

Im putting up a website and have noticed this mysterious symbol that only pops up on Mac when using Safari. the element is inside a h2 tag. The attached imageshows the mystery symbol in a wonky red circle

Below is the html.

   <div class="top-black" id="pre-baserate-top">
       <img class="specs-r-img" src="/ui/3_tvs_icon_244x90.png" alt="3tv icons"/>
       <div class="title-container white-title">
            <h1>YOU’VE UNCOVERED 3 RESULTS</h1>
            <h2>The Good, The Bad, and The Better‏</h2>
       </div>
   </div>

Below is the CSS

.top-black{
  background-color: black;
  width: 100%;
  img{
   margin:0 auto;
   padding-top:2%

  }
  .white-title{
    color:white;
    margin:0;
    h2{
      margin:0;
    }
}

Please help!

Answer 1

At the end of the content of the h2 element, there is U+200F RIGHT-TO-LEFT MARK, an invisible control character, which specifies that the rest of the content shall have right to left as the basic writing direction. It should have no effect in this context, but apparently Mac Safari fails to handle it properly and instead tries to render it as a graphic character; an X in a box is a common indication of trying to render a character that is not available in the currently used fonts.

The solution is, of course, to remove that character. In a simple text editor for example, position the cursor before the < in </h2> and press the rubout key (typically labeled with ← ).

Hint: To check out what is going on, I copied the markup in the question into the BabelPad editor, where you can see the Unicode numbers and names of characters as you move the cursor around.