†Appearing Instead of Quotation Marks

†appearing instead of quotation marks

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

Question mark icons showing up for quotation marks when there's a UTF-8 character encoding

Your text editor is saving your file, including the quotation marks, in some encoding that isn't UTF-8 (most likely CP1252). Convert the file to actually be UTF-8 and try again.

Single quotes showing as diamond shaped question mark in browsers (no database or PHP)

The only quotes in ASCII are the single quote ' (0x27 or 39) and the double quote " (0x22 or 33). What you have there is an 8-bit encoding that places quotes at 145 (0x91) and 146 (0x92) called CP1252; it's the standard 8-bit Western European encoding for Windows. If what you want is UTF-8, you need to convert that to UTF-8, since it's not valid UTF-8; valid UTF-8 uses multiple bytes for characters above 127 (0x7F), and places the opening and closing quotes at U+2018 and U+2019 respectively.

Quotation marks only appear after entering them twice - IntelliJ IDEA

Right after posting the question I just reopened both windows. Upon reopening, the problem stopped existing. I'm not sure why it used to happen, but it doesn't anymore.

Using CSS to force showing right single quotation mark instead of apostrophe

Important: CSS is not meant to change or replace text. You can use some client-side scripting language like Javascript or Server-side languages to do text change functionality

OP Solution

It looks like a font issue, try changing the font that you have or completely removing the font family to troubleshoot. Google Fonts is a good place to start testing your text, if you know your font name and can find it in there.

HAck: If you really want to hack it using CSS, you can wrap your apostrophe (') in a span tag and use :before or :after CSS selector to change its content using the content property. Again it's not recommended to do it and if fonts is an issue, you may see the same behaviour again

---

Working Example

span {
  display: none
}

div:after {
  content: '>';
}

<div>Quote <span> ' </span></div>

HTML attributes without quotation marks?

Always use quotation marks.

I don't believe that HTML properties without quotation marks are classed as Invalid HTML, but they will potentially cause you problems later on down the line.

By default, SGML requires that all attribute values be delimited using
either double quotation marks (ASCII decimal 34) or single quotation
marks (ASCII decimal 39). Single quote marks can be included within
the attribute value when the value is delimited by double quote marks,
and vice versa. Authors may also use numeric character references to
represent double quotes (") and single quotes ('). For double
quotes authors can also use the character entity reference ".

In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only contain
letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45),
periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons
(ASCII decimal 58). We recommend using quotation marks even when it is
possible to eliminate them.

Source: http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.2

---

I think they're a great way of clearly defining when an attribute value starts and finishes.

Take for example the class attribute which can have multiple classes seperated by spaces:

<div class="classa classb" id="123">

This clearly shows the browser that my classes are classa and classb, with an element id of 123.

Take away the quotation marks and we've got:

<div class=classa classb id=123>

A browser could now interpret this as 3 classes, with no id. classa, classb and id=123.

Or it may even interpret it as 3 attributes. class="classa", classb="" and id="123"

(Even stackoverflow's syntax styling is struggling with this one!)

---

Related Topics