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, the apostrophe was converted into this random string of characters: '
That left 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 for the artwork. And sure enough, the error persisted.
It is showing on my storefront, where everyone can see it! This is not a good thing for my store, because it makes the listing, and me, look unprofessional.
Why is the Apostrophe Gibberish?
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 by web 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 accidentally, 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 apostrophe, which could be part of a HTML instruction, and replacing it with the safe character entity '
How To Fix Your Apostrophes
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 character 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.
There is even more gibberish here, what the heck?!
Well, that’s because the ampersand in the character entity from before, ' is ALSO being escaped, using the code &
But replacing the apostrophe will fix that too. Let’s replace that gobbledygook with the right single quotation mark, making the first word Ricardio’s.
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,