I am working in a CMS which allows users to enter content. The problem is that when they add symbols ®
, it may not display well in all browsers. I would like to set up a list of symbols that must be searched for, and then converted to the corresponding html entity. For example
® => ®
& => &
© => ©
™ => ™
After the conversion, it needs to be wrapped in a <sup>
tag, resulting in this:
®
=> <sup>®</sup>
Because a particular font size and padding style is necessary:
sup { font-size: 0.6em; padding-top: 0.2em; }
Would the JavaScript be something like this?
var regs = document.querySelectorAll('®');
for ( var i = 0, l = imgs.length; i < l; ++i ) {
var [?] = regs[i];
var [?] = document.createElement('sup');
img.parentNode.insertBefore([?]);
div.appendChild([?]);
}
Where "[?]" means that there is something that I am not sure about.
Additional Details:
- I would like to do this with pure JavaScript, not something that requires a library like jQuery, thanks.
- Backend is Ruby
- Using RefineryCMS which is built with Ruby on Rails
accept-charset="UTF-8"
to your<form>
tag. On the server, you’d want to make sure your output is UTF-8 encoded, and that your web server tells the browser that it is (via theContent-Type
header). See rentzsch.tumblr.com/post/9133498042/… If you do all that, and a browser doesn’t display the character correctly, then replacing the character with an entity wouldn’t make any difference.sup
elements tends to cause more problems than it could possibly solve, since in many fonts, “®” is small and in subscript position, so you would reduce it to unrecognizable.<sup>
is not an issue since I have tested the specific fonts used for the blog posts, but that is a good point to consider.