Trouble with text box dimensions

[William C]

Hi there,
fairly new MC Flare user here with a hopefully easy question to address.
Am trying to simulate the screens of our software within text boxes. Currently we mimic the screens of our system within text boxes in MS Word and generally don't have any issues. Our screens have 80 em characters in width and 24 em in height. I have the default font set to Courier New and am using 1 em for the font size; padding and margins are all set to zero. I have both the box width set to 80 em and the box height set to 24 em. When utilizing the preview function, the text box appears far too wide and the height actually cuts off the text at the bottom and the text overflows to outside of the text box itself.
Any suggestions or recommendations are appreciated. Thanks!

[NorthEast]

If this is for HTML5 output in a browser, then you can use the units ch (character) and lh (line height).
But I doubt this will work for PDF output, or Word output.

Code: Select all

div.textbox
{
   width: 80ch;
   height: 24lh;
}

Em units are a bit complicated. My understanding is that the em unit will equal the current font-size, but font-size refers to the height of the font, not the width. So in theory you could use ems to set the height (not width), but you also have to consider the line-height spacing between lines. So the actual height of a single line is 1em multiplied by the line-height, so 1em will only be the same as the height of a line if the line-height is set to 1 (100%).

Anyway, using the ch and lh units above should work in most browsers.