Page 1 of 1

TinyMCE - text so tiny in editor window

Posted: Tue May 22, 2007 2:38 pm
by Anastasis
I am having problems using the TinyMCE editor with the text of my pages in the editor pane being so tiny.

The actual text in previewed page via the Preview tab is perfect, but in the editor it is almost illegible. (The FCKEditor doesn't do this, but for other reasons I prefer to use the TinyMCE editor).

Using Arial as the default font, my stylesheet applies the style with a font-size of 0.95em and the style as 0.75em

It feels like something in the TinyMCE editor is forcing a small font-size value before my stylesheet is picked up so my relative "em" values are being downsized in the editor window. But as I say, the page outputs perfectly.

Has anyone else experienced this?

Re: TinyMCE - text so tiny in editor window

Posted: Mon Aug 06, 2007 5:51 pm
by 10010110
Yes, I’ve experienced this. The thing is that TinyMCE doesn’t render all the styles properly. There was a thread where someone really analyzed it but I don’t remember where it was.
Anyway, it’s important to know that TinyMCE only renders styles that are directly applied to the body and/or to elements through classes or single element selectors in the stylesheet - and only if the stylesheet is set to screen media type.

I.e.:

Code: Select all

body {font-size: 20px;}
a {font-weight: bold;}
p {color: red;}
will render in TinyMCE while

Code: Select all

p a {font-weight: bold;}
#content {font-size: 20px;}
#content p {color: red;}
won’t be displayed.

So, either you set a body font size that is big enough to read OR which is even simpler in your case:
  • Go to Extensions > TinyMCE module
  • On the settings page change “Body tag CSS” from default to whatever styles you wanna see, i.e. font-size: 14px; background: yellow; …etc.
  • Click “Update”