CODEWITHSUNDEEP
css
Dan Herbert
Dan Herbert

Reputation: 103447

Allowing the <font> tag to override CSS?

I have some user generated content I'm trying to render on my site. The rich text box editor I'm using renders font changes using <font /> tags, which are overridden by CSS on the page.

Does anyone know if there is a way to allow rules defined using the <font /> tag to show through?

UPDATE
Since changing the control I'm using for my rich text editor is not an option and my users have no knowledge of HTML to understand the difference between a <font> tag and any other type of tag, I had no choice but to create a hack to fix my problem. Below is the code I used to solve it. It's a jQuery script that changes all <font /> tag attributes into 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);
    });
})();

Upvotes: 0

Views: 8326

Answers (5)

thismat
thismat

Reputation: 2096

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, technically should override most styles as long as it's the closest element to the raw text.

If it's failing it's likely due to the CSS using the !important attribute to override it.

Upvotes: 2

Rick Buczynski
Rick Buczynski

Reputation: 56

A year late, but thought I'd share nonetheless.

I was frustrated by this, as well. I was using a freeware RTE JavaScript component that produced <FONT /> tags. It wasn't convenient to replace it, as it was for a client and it was a callback to fix this CSS override problem.

Unfortunately, none of the other solutions worked in my case, so after thinking 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 believable results.

Upvotes: 4

Mr. Shiny and New 安宇
Mr. Shiny and New 安宇

Reputation: 13908

<font> is just an element like any other; it can be styled using CSS. You can write CSS to allow the font tag's styles to push down as follows:

<!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>

Upvotes: 0

roryf
roryf

Reputation: 30160

Honestly? 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 won't necessarily appear that way when published. Once thing I've done with FCKeditor in the past is limit its toolbar to the basics, like lists, links, headings etc., no styling options whatsoever.

Upvotes: 1

sblundy
sblundy

Reputation: 61414

You could convert it to a style tag on the element. Anything in that would take precedence over style sheet defined rules.

Upvotes: 1

Related Questions