I get email notifications every time someone makes a sale on my Redbubble store. Well today, I got one of those emails, but I noticed that the title for my Adventure Time fan art looked very wrong indeed...
The name of the artwork should read as "Ricardio's Love Is Completely Consensual", with an apostrophe in the first word. But instead, apostrophe was converted into a random string of characters ['], leaving me with a title which reads "Ricardio's Love Is Completely Consensual"
I decided to check my Redbubble store to see if this issue was appearing elsewhere. And sure enough, the error persisted.
This is not a good thing for my store, because it makes the listing, and me, look unprofessional.
Why Does The Apostrophe Become Nonsense?
This area might get a bit techy, so you can skip it if you want.
So, as you may know, websites are made of lots and lots of lines of code, known as HTML. HTML uses several different symbols to define what pieces of code do what function. For example, look at the code below.
This code is converted in your browser into this: Hello World
The <b> part tells the browser, "this is an instruction to start a bold effect on text."
The </b> tells the browser, "ok, stop the bold area."
So, what if you DIDN'T want the text to automatically go bold? What if we wanted to show the <b> without it converting into an instruction? That can be done by escaping, which means using a secret code, known as a character entity, that represents the same symbols. The secret code for a less than symbol is < If you type that code in HTML, it will create a < that won't become an instruction to the browser.
Websites will often automatically do this to text areas that users can type in, so they don't accedentally, or purposely, type in HTML code that could do something to the website, like getting the database of user's emails and passwords.
This is what Redbubble is doing to my heading. It is replacing an apostrope, which could be part of a HTML instruction, and replacing it with the safe character entity '
How To Fix The Problem?
We must avoid using characters that can be HTML instructions. The list of these characters is:
Double quotation mark "
Less than <
Greater than >
So, I have two options for my artwork title. I can reword it so there's no longer a need for an apostrophe. Or I can use a safe symbol. I'm going to try the latter, and use the right single quotation mark ’
If your keyboard can't type this symbol, you can copy mine above, or go to FreeFormatter.com which has a compregensive list of HTML characters that you can easily copy.
Let's open the Manage Portfolio screen in Redbubble, and do a Quick Edit of this artwork.
Interesting to note that the ampersand in the character entity is also being escaped here.
Anyway, let's replace that gobbledygook with the right single quotation mark. Then we'll save and check my store again...
Success! This character shows up correctly in my browser!
Make sure to check your other Redbubble listings to see if they are having similar issues.
I hope this guide helps you make titles that look right on Redbubble and other print-on-demand stores. Any questions or comments, just leave a comment below!
Peace, love and sunshine,
Pin This Post on Pinterest