0

I have a quite unusual problem with the rendering of a textarea-field in Firefox. I haven't tested other versions than 18.0 on a Mac until now.

My problem is, that the font-size always is relative to 13px (the os-default) and not to 16px what it's parent has. If I define a fixed font-size for it's parent, it works as expected. But if all parents have a relative font-size the textarea's font-size is just relative to my OS-default.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test Firefox ..</title>

    <style>
        /* Fixed sizes */
        /* body { font-size: 12pt; } */
        /* body { font-size: 16px; } */
        /* body { font-size: 0.4234cm; } */

        /* Dynamic sizes */
        /* body { font-size: 1em; } */
        /* body { font-size: 100%; } */
        /* body { font-size: medium; } */

        textarea { font-size: 1em; }
    </style>
</head>
<body>
    <textarea rows="4" cols="20">abc</textarea>
</body>
</html>

Similar question, but does not cover my case: Why <textarea> and <textfield> not taking font-family and font-size from body?

Anyone experienced something similar before, or can confirm this behaviour in other Browser(version)s or OSes?

EDIT: Here's the code on jsfiddle.net: http://jsfiddle.net/E4WwV/

Community
  • 1
  • 1
SimonSimCity
  • 6,415
  • 3
  • 39
  • 52
  • An element can have only one parent (that’s one reason why the “parent” metaphor is misleading). You haven’t specified what styling the parent (the `body` element in your sample code) actually has, since you have commented out all the settings. Please make it clear what the problem really is. If you set the `body` font size to `1em`, `100%`, or `medium`, then you get the browser’s default font, so why did you expect to get some other value`? – Jukka K. Korpela Dec 07 '12 at 14:28
  • Just try it out, @jukka-k-korpela. It was by meaning that I commented it out. Try to dis-commend one of the dynamic font-sizes. The font-size of the textarea won't change. But if you uncomment one of the fixed-sizes, it will. This is just an example to get it explained in a nutshell. – SimonSimCity Dec 07 '12 at 15:32
  • Nothing should change if you declare `body { font-size: 1em }` for example, so what is the problem? – Jukka K. Korpela Dec 07 '12 at 15:42
  • @jukka-k-korpela: What font-size is used in your case to render the font in the textarea? Shouldn't it be the same as for the body-tag? I have this CSS and my textarea has a rendered font-size of 13px and my body has a rendered font-size of 16px. I just want to know if this is a somewhere-defined behavior or a bug in Firefox as it's not this way f.e. in Safari or Chrome. – SimonSimCity Dec 07 '12 at 22:31

2 Answers2

2

In Firefox (I don't know if other browsers have that too) you have the possibility to set two default font-sizes:

  • Default font-size (16px)
  • Default font-size for text having the generic font-family monospace (13px)

Since the default font-size in my example is just 1em (for the textarea and the body) it's 1 times the default font-size which is 13px for all monospaced text and 16px for all other text.

Here is an article that has a great explanation and also a usable work-around to this: http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/

SimonSimCity
  • 6,415
  • 3
  • 39
  • 52
  • I wanted to leave the default font sizes up to the user, so I just used the hack mentioned in the article you linked and the font size in my monospace textarea matched that of my document: `font-family: "Courier No", monospace, serif; font-size: 1rem;` without any other changes. – Vince Nov 23 '18 at 06:41
1

Textarea and body use different font families. Textarea defaults to using a monospace system font, and there is some weirdness for system fonts to size them based on your browser's font preferences in Gecko. So if your preference set the normal size for your monospace font to 13px, that's what you're going to end up with in this case...

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • This is correct and your answer did point me to the correct solution, but I had to read it 3 times after reading the link I posted to get what you meant. – SimonSimCity Dec 09 '12 at 19:27