How to change font size when you *don't* control the HTML?

Question

How do you increase/decrease the font size in a web page when you don't control the HTML, but only the div or the iFrame in which the HTML appears?

We have a site that includes user-generated content. This content is essentially uncontrolled, and the HTML can be complex. (It's an "upload your own ebook" app).

We wrap the content for each chapter in a div. We'd like to add a control to the page that will allow the reader to increase the size of the fonts within the div.

A similar question was asked here: Allow users to change font size in a webpage, but the answers won't work because I can't prevent users from adding HTML that specifies font sizes in pixels.

My best thought is to roll through all the text using jQuery and adjust, but this is likely to generate problems when font sizes are inherited, because the font in a child element would get adjusted twice.

Is there any generalized solution for this problem?

Answer 1

I would look into stripping the font size when the book is uploaded.
Alternatively: Tell your writers that their books might not look the right way in everyone's browsers if they specify exact fonts.

Answer 2

You can use JavaScript to:

• change CSS attributes
• remove tags from text