Why Is the Pound Symbol ("£") Displayed as a Question Mark or Rectangle On My Web Page?

How to Fix the Pound Sign ("£") Not Showing Up Correctly on Your Website


Why Is the Pound Symbol ("£") Displayed as a Question Mark or Rectangular Box On My Web Page?

by Christopher Heng, thesitewizard.com

One of my visitors recently told me that whenever he updated a page on his website with an unspecified software, all the pound symbols ("£") on his page turned into diamond shaped blocks with question marks ("?") in his web browser. He would then have to manually fix it with a web editor (in his case, Dreamweaver). He wanted to know why this was the case, and how he could fix it.

The Short Answer: Character Encoding Mismatch

The short answer to the question, for those who know the technical lingo, is that there's a character encoding mismatch. If you have no idea what I just said in the previous sentence, please read on for the long answer. You should also read on if you want to know how to solve the problem.

What is Character Encoding?

I'm sure many of you know (or at least have heard) that at a very low level, computers store data as numbers (loosely speaking). When you type something into your web page, like the word "Chris", it is not actually stored as a sequence of alphabetic characters. Under the hood, those letters are probably stored as the numbers 67, 104, 114, 105, 115, where the number 67 represents "C", 104 "h", 114 "r", 105 "i", and 115 "s". When your web browser shows that page, it translates those numbers back into the letters of the alphabet for display, so that we don't have to be a digital savant to figure out what it means.

But how does any computer program know that 67 actually means "C" or vice versa? After all, it's not like when you look at the letter "C", you can say "I can feel in my bones that this is the number 67". Indeed, the mapping of a character to a particular number is arbitrary, and is done by convention. That is to say, some people got together and agreed that they would take 67 to mean the letter "C". Any software that followed that particular convention would automatically encode a "C" as 67 when they saved the file, and decode 67 as "C" when displaying it. Such a convention for encoding characters is, unsurprisingly, known as a "character encoding".

Unfortunately, there is not one character encoding that is used by everyone around the world. There are many. And therein lies the crux of the problem.

The Pound Sign

While a number of modern character encodings in use today map the basic English alphabet (and numerals) to the same number, the same cannot be said of the non-alphabetic (and non-numeric) characters. And the pound symbol ("£") is one of those that has a different value depending on which encoding you use.

For example, in one commonly-used character encoding system, known as the ISO 8859-1, the pound is encoded as the number 163. In another, known as Unicode UTF-8, it is translated as a sequence of two digits, 194 and 163. If your web page is in English, you are likely to be using one or the other of these 2 encodings, since web editors frequently use these by default. Very often, ISO 8859-1 is preferred by older software, and UTF-8 by newer ones.

If a piece of software saved "£" as 163 using ISO 8859-1, but another piece of software thinks that the web page was saved using UTF-8, the latter will not interpret 163 as "£", since under UTF-8, it will expect the page to say "194, 163" if it meant "£". Indeed, under UTF-8, a solitary 163 is not really a printable (ie, displayable) character. When a web browser encounters a character it cannot display, it either shows a question mark ("?") or a rectangular block (depending on which browser you use).

From the (all too brief) description given by my visitor, it seems like this was what had happened.

How Could This Mixup Have Occurred?

There are numerous situations that could have led to this mismatch of encodings. Here are a couple of common ones.

But I Didn't Even Touch the Pound Symbol When I Updated My Page

Perhaps, at this point, you may want to protest, "But Chris, I didn't even touch the wretched pound when I updated my page. Why did it change?"

Since I don't know the exact details of your situation, I'll assume that you used an editor (whether a web editor, or a programmer's or general purpose text editor) of some sort to update the page.

When editing software save a web page, they have to save the entire file to the disk, even if you only changed a small part of it. It cannot simply save the paragraph you altered or deleted or added. Since it had to rewrite the entire file, it will encode everything in whatever character encoding it's set up to use. So even if your page had been correctly encoded in UTF-8 (or whatever) before, by the time the operation is over, it will have a new encoding.

Solutions to the Pound ("£") Not Being Properly Displayed

  1. The Quick Fix (that Doesn't Solve the Underlying Problem)

    The superficial fix is to insert "£" (without the quotes) instead of "£". By design, when a web browser encounters the sequence of characters "£", it will display it as "£". However, for this to work, if you are using a visual web editor, you will have to insert "£" as HTML code or you will just end up with the text "£" being displayed instead of "£".

    For example, if you use Expression Web, you will need to follow the procedure I describe in How to Insert HTML Code with Expression Web to type "£". Likewise, BlueGriffon users should read How to Insert HTML Code in BlueGriffon and Dreamweaver users the article How to Insert Raw HTML Code in Dreamweaver.

    The reason I said that this is a superficial fix is that while it solves the immediate display issue, it doesn't actually remove the real problem that led to this glitch, which is that of conflicting character encodings being specified and used. Eventually, this issue will resurface when you insert other characters that have different underlying values, such as the copyright symbol.

  2. How to Fix the Software that Mangled Your Page

    The root problem is that the encoding declared (or expected) in your file is not the one actually used. The better solution is thus to make sure that the declaration matches the encoding.

    I think the most common scenario is that you have a program that saves in ISO 8859-1 (or Windows-1252), but your page says it's in UTF-8. It may say this because you explicitly put a meta tag there yourself, or because you used yet another program that inserted it.

    If you use Notepad, and you have a meta tag that says UTF-8, either change it to say Windows-1252, or even better, get Notepad to save in UTF-8 format. To do the latter, in the "Save As" dialog box, look for the field labelled "Encoding" (near the bottom of the dialog box). By default, it should say "ANSI". Click the down arrow for that drop-down box and select "UTF-8" instead. (Note: I have only tested this with the Notepad that comes with Windows 7. I don't know if the ones that come with earlier or later versions of Windows have this same facility.)

    Those who use a different editor will also need to specify the encoding, especially if you use Windows, since many text editors on that system seem to use Windows-1252 by default. (This is not true of visual web editors though. For example, Dreamweaver uses UTF-8 by default, and KompoZer ISO 8859-1.) Unfortunately, I can't be specific about how you can alter this setting since the way to do it varies from software to software. I suggest that you first check to see if the "Save As" dialog box has an "Encoding" (or "Format") option. If not, try the configuration options of that editor (click the different menus and look for line that says "Options" or "Configuration" or "Properties") and search for "Encoding", "File format", "Language", "Character set" or words to that effect.

    If you use 2 or more programs to maintain the same page, you will need to synchronise ("synchronize" if you use a different variant of English) those programs so that they all agree on the character encoding. In general, if you have a choice of whether to use ISO 8859-1 or UTF-8, it's probably best to choose UTF-8, since the latter provides a lot more characters (having been designed to handle all human languages).

How to Get the Pound ("£") to be Properly Displayed on a Web Page

The pound sign ("£") failing to show up correctly is a symptom of a character encoding problem. Using the solutions suggested above, you should be able to fix it so that it doesn't occur again.

Copyright © 2014-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

How to Link to This Page

It will appear on your page as:

Why Is the Pound Symbol ("£") Displayed as a Question Mark or Rectangular Box On My Web Page?





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.