Font sizes in the WYSIWYG editing window.

[cromagnon]

In the initial release of v. 2, the font-sizes in the editing window were correctly pulled from the stylesheet for the document. Now they seem to be much smaller than the size defined in the stylesheet, although other attributes (colour, font) are being correctly displayed.

The overall effect is that the editing window provides a less realistic (and more difficult to use) representation of the finished page. This appears to be true in both Firefox and IE6.

Henri, are you aware of this change and how difficult is it to change it back? (Sorry, I always seem to be on here nitpicking about minor problems in an otherwise stunning piece of software . . . . . )

[Jenkinhill]

It seems that the latest version of the tinyMCE editor sets a smaller basefont. If the font size on the page being edited is set in pixels then it is diplayed OK, but the use of relative font sizes results in the small text. I agree, this needs fixing.

[cromagnon]

Thanks - so the problem is the editor itself. The font-sizes in the editing window are quite ridiculously small; why on earth they would change this is quite beyond me!

I don't want to move to sizing fonts in pixels, because Internet Explorer (in its infinite wisdom) doesn't resize text specified in pixels when users select a different text size under the View menu . . . . . hence fonts in pixels are poor for accessbility.

Am I correct in assuming that this won't be fixed until a new version of TinyMCE is released; assuming that the team there is aware of the issue?

[admin]

Is this problem related to this one?

http://www.snippetmaster.com/forums/index.php/topic,986.0.html

If so, then take a look at that forum thread on the tinyMCE forums.  Please be sure to add your thoughts there (or start a new thread), because I agree that this is a problem.

Basically, I have set the editor to convert fonts to SPAN tags, because that is what makes it xhtml compliant.

However, if tinyMCE is not able to fix this soon.. what I might do is create this as an option in the admin area of snippetmaster.  Something like this:

Convert existing font tags to span tags? [ ] yes  [ ]

This way, you can turn this "feature" on/off as desired.

What do you think?

[Jenkinhill]

Henri, it is not related to the span/font issue - I do not use font tags.  This is different in that the where the font size is defined by CSS using relative sizes it is shown in the editor window as much smaller.

Unfortunately this does not happen all the time. I just went to my test editor setup only to find that the font size in the editor is correct. This morning it was far too small - and I have made no changes to the site or css. All I did was to look through the tinymce directory to see if I could spot something in the css there which coud cause small text. I hate these sort of problems!

[admin]

Ah.. I see what you mean now.

OK.. there must be a rhyme or reason behind this, so it's now a matter of figuring out when/why this is happening.

Is it possible you can send me a snippetmaster un/pw for the page where this problem has occured?  I can then login periodically and try to figure out what might be the problem.

The editor uses your own CSS to display, so there shouldn't be anything in the tinyMCE folders that is interfering.  If no CSS files are found in your page being edited, then the /tiny_mce/themes/advanced/css/editor_content.css is used for "styling" the editor contents a bit.

The other two css files in there are used for the tinyMCE popups and the toolbar. They shouldn't be causing a conflict with the actual code being edited, though... but it's worth checking!

Let me know.

[Jenkinhill]

Henri, you already have login details - it is the site with the database problem.

The small text problem was with index.html, editing the whole page.

[cromagnon]

OK, I think I've worked this out - at least as far as fixing my problem is concerned.

Looking inside the editor_content.css file we find this:

body, td, pre {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
}

Henri, I believe that you're wrong when you say that this css is applied to the wysiwyg editor only when another css file is not available. What, I think happens is that this file is applied as well as any external stylesheets. If the tags in the css file in the site use font-sizes that are relative (e.g. percentages or ems), they become percentages of the size defined in the body tag in editor_content.css. So, for example, a font-size of 80% becomes 80% of 10px - which is stupidly small. Of course, if the font sizes are defined in pixels, this overwrites the size coming from editor_content.css.

To test this, I set the body tag in my site to include font-size: 10px and hey presto, all of my fonts are ridiculously small, just like in that editor window.

So the solution is simple. Change the font-size in editor_content.css to something more reasonable (e.g. 14px) and the wysiwyg works just fine. Deleting the font-size statement altogether seems to work too.

I have no idea why font-size: 10px was chosen . . . . . . I suppose it's just a bug that slipped through in the latest release of tinyMCE.

--------------------------

ADDITION:

A simpler idea is to just make sure that there is a font-size declaration for the body tag in your site.

So adding body {font-size: 100%;} to my stylesheet solved the problem too, because this style is taken preferentially by the wysiwyg editor. Note that defining the font-size in pixels is not a good idea, since then, even though other definitions may be in % or ems, IE6 will not resize text; which was, after all, the whole point of defining font-sizes in ems or % in the first place! 

[Jenkinhill]

I tried renaming editor_content.css to something useless - and (once I had cleared FireFox's cache) the font size was correctly displayed. I played around a bit and can also confirm that simply removing the font-size solves this issue. I presume the declaration is in the style sheet for those sites where there is no font defined, to avoid it using the browser default (which would probably be Times), but there is some sort of implementation error in this version of TinyMCE. I have just left the definition commented out.

Sorry, Henri, looks like another small update.

[admin]

Looking inside the editor_content.css file we find this:

body, td, pre {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
}

Henri, I believe that you're wrong when you say that this css is applied to the wysiwyg editor only when another css file is not available. What, I think happens is that this file is applied as well as any external stylesheets.
 

I think you are correct!

 

What do you think is the best "fix" for this problem?

1) Comment out the "body, td, pre " styles in the editor_content.css file?

2) Change the font size to something bigger like 14px.

I'm a little hesitant to comment out the style, because it's a decent default for people who aren't using styles, etc..

But at the same time, I do want the editor to accurately represent what is being edited.

Thoughts?  Let me know and I'll get this fixed for the next release.  (About 1 week)

[Jenkinhill]

Henri, it seems to me that TinyMCE is incorrectly applying this default font-size before any "relative" size that may be set in the style sheet the page being edited, rather than only using the 10px default if no font-size is set. So if the (base) font-size were set to 14px it would still display incorrectly when, say, a size of 0.8em were present in the users css.

I would like to see it simply commented out, thus providing the opportunity to re-instate it if required by the user. In the absence of a font-size setting either in TinyMCE's or the user's css then the editor will default to using the browser default font and size. This is how the previous version of TinyMCE worked.