How to specify font-size by width?

Question

I have a page for which it is essential that certain elements do not exceed certain widths.

For this case, I know that I can achieve this with any monospaced font such that the horizontal "stride" from one character to the next does not exceed a certain threshold.

I've found that this is nowhere near enough to enforce this constraint:

.someclass {
  font-family: monospace;
  font-width: 13px;
}

or even something more specific, like

.someclass {
  font-family: consolas, monaco, courier, monospace;
  font-width: 13px;
}

...because the fonts that fit this specification can vary wildly in their widths. (In fact, I realized this when I discovered that the above CSS produces satisfactory results in Chrome, but totally unacceptable ones in Firefox, because the font the latter uses to satisfy the directive above is vastly wider than the one that Chrome uses.)

IOW, essentially, what I'd like to do is something like:

.someclass {
  font-family: monospace;
  font-width: 8px;
}

AFAIK, this is not possible.

Is there some other way to impose a hard bound on font widths with CSS?

Bhojendra Rauniyar · Accepted Answer · 2015-06-26 04:31:39Z

3

I think you need font-stretch:

.someclass {
  font-family: monospace;
  font-stretch: ultra-expanded;
}

font-stretch accepts one of the following values:

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded
inherit

Look it at mdn

answered Jun 26, 2015 at 4:31

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user663031 Over a year ago

How does this solve the problem? How does he know which font-stretch value to use?

user663031 · Accepted Answer · 2015-06-26 04:49:37Z

1

You are going to need to iterate over font sizes until you find one that satisfies your constraints. Here is some rough pseudo-code for the one-line case:

function adjust_font_size(elt, start_size) {
    while (elt.scrollWidth > elt.offsetWidth) {     // doesn't fit
        elt.style.fontSize = --start_size + "px";   // reduce font size
    }
}

answered Jun 26, 2015 at 4:49

user663031

Comments

tylerism · Accepted Answer · 2015-06-26 04:32:05Z

0

As far as I know there is no way to force that constraint. The exact width depends greatly on what your user-agent is and what device you are using.

answered Jun 26, 2015 at 4:32

tylerism

6791 gold badge4 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to specify font-size by width?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related