Allow <font> tag to override CSS?
I have user generated content that I am trying to execute on my site. A rich textbox editor that I use modifies font changes with tags <font />
that are overridden by CSS on the page.
Does anyone know if there is a way to allow rules defined with a tag <font />
to be displayed through?
UPDATE
Since changing the control I'm using for my rich text editor is not an option and my users don't know HTML to understand the difference between a tag <font>
and a different type of tag, I had no choice but to create a hack to fix mine problem. Below is the code I used to solve it. This is a jQuery script that changes all attributes of the tag <font />
to inline CSS.
(function() {
$('font[size]').each(function() {
var fontSize = this.size;
if (fontSize == 1) {
$(this).css("font-size", 8);
} else if (fontSize == 2) {
$(this).css("font-size", 9);
} else if (fontSize == 3) {
$(this).css("font-size", 11);
} else if (fontSize == 4) {
$(this).css("font-size", 15);
} else if (fontSize == 5) {
$(this).css("font-size", 20);
} else if (fontSize == 6) {
$(this).css("font-size", 25);
}
});
$('font[face]').each(function() {
$(this).css('font-family', this.face);
});
$('font[color]').each(function() {
$(this).css('color', this.color);
});
})();
source to share
A year later, but thought I would share anyway.
I was also upset about this. I used a free JavaScript component RTE that generated tags <FONT />
. There was no way to replace it as it was for the client and it was a callback to fix this CSS override issue.
Unfortunately, none of the other solutions worked in my case, so on reflection I came up with this JavaScript solution:
var fontEl=document.getElementsByTagName("font");
for(var i=0;i<fontEl.length;i++) {
var f = fontEl[i];
if(f.size)
f.style.fontSize=(Math.round(parseInt(f.size)*12*0.6)).toString()+'px';
if(f.face)
f.style.fontFamily=f.face;
if(f.color)
f.style.color=f.color;
}
The formula for converting font size is incorrect, but accurate enough to produce reliable results.
source to share
I would suggest overriding the CSS with your own styles that implement the important attribute.
div.MyClass p
{
font-size: 0.7em !important;
}
The font tag should technically override most styles if it is closest to the original text.
If it is not, it may be due to CSS using an important attribute! To override it.
source to share
Fair? Get a new rich text editor! TinyMCE or FCKeditor are both okay choices. Either that, or educate your users to understand that the styles they set in the editor will not necessarily appear this way when they publish. Once upon a time, what I've done with FCKeditor in the past restricts its toolbar to basics like lists, links, headings, etc., no style options at all.
source to share
<font> is just an element like any other; it can be used with CSS. You can write CSS so that font tag styles can be flushed like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body { color: black}
a { color: red; font-family: Sans; font-size: 14px;}
font * { color: inherit; font-family: inherit; font-size: inherit}
</style>
</head>
<body>
This is outside <a href="#">inside</a> outside. <font color="green" face="Times New Roman" size="20">Outside <a href="#">inside</a> outside</font>.
</body>
</html>
source to share