font size in pre element is limited to 12px

Question

im putting an ascii art inside a pre element and setting the font size to 2px (1.5px for small screens). it works fine on mac (chrome, safari) and android (chrome):

however when i tested it in Windows (Chrome and Edge) the browsers automatically set the font size to 12px, even though ive put font-size: 2px !important;:

@media screen and (min-width: 500px) {
  #terminal-ascii-art {
    font-size: 2px !important;
    background-color: white;
    color: black;
  }
}

@media screen and (max-width: 500px) {
  #terminal-ascii-art {
    font-size: 1.5px !important;
    background-color: black;
    color: white;
  }
}

#terminal-ascii-art {
  line-height: normal !important;
  padding: 0;
  margin: 0;
  border: 0;
}

<pre id="terminal-ascii-art">
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ .  . .'$@$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$k ..........     _$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$.. !$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$                  /$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$          ($$$$$$$$$$$$$$$$$$$$$'                  @$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$ ..     ..   . . O$$$$$$$$$$$$$$'.....             ..8$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$.......... $$$$$$$$l. .. .Y$$$ `                   ..$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$ ........ .$$$$$$$$$$$$$$$$$$'.  ..                 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$a         '{$$$$$$$$$$$$$$$$$$$$$$$_,1$.       .     .. . $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$.          $$$$$$$$$$$$$$$$$$$$$$$$$$$.^                   .  /$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$ ........ $$$$$$$$$$$$$$$$$$$$$$$$$$$$z$...`..............  $$$oi .  .  .. .   . a$$$$$$$$$$$$$$$
$$$..       .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.               .@$$$$$$$$$$$$.      ...      ...' '}
$$$ ....... .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ .... ...  .....  I$$$$$$$$$$n..... $$$$$$$$$$$@~ . .
$$$        .l$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$..   .             ..$$}.....    ...$$$$$$$$$$$$$$$$$$$
$$$.        b$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.   v$$                      . .$$$$$$$$$$$$$$$$$$$$$$$$
$$$ ....... _$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.. ..  ...........d . . ,$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$q         $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$/.              $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$.   ... .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$........... $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$@        %$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.             $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$.       .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$'               $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$ .....  .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@ ..................-$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$d.      .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.                      ?$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$. ....  @$$$$$$$$$$$$$$$$$$$$$$$$ .........................  $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$     ...$$$$$$$$$$$$$$$$$$$$$-. .                        ..$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$..    .Y$$$$$$$$$$$$$$$$$$ .                              ^$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$&.    .$$$$$$$$$$$$$$$$...                                .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$Y    .@$$$$$$$$$$$$$@..                                    .$$$$$$$$$$$$$$$$$$$$$$$$$$$$$               
</pre>

I've tested your code and it works fine on `Chrome 105` on `Windows` machine. — ThS, Sep 19 '22 at 16:50
This doesn't solve your problem, but you do not need the `max-width` media query, put the `font-size: 1.5px` in with the line-height, padding, etc. and move that whole `#terminal-ascii-art` rule ABOVE the `min-width`. — disinfor, Sep 19 '22 at 17:19
i'm starting to think it prob has to do with browser / os language settings? it works when the language is english and stops working when it's chinese — 2yil, Sep 19 '22 at 17:19

2yil · Answer 1 · 2022-09-20T12:51:23.727

1

turns out this is caused by browser language settings (tested in win10 opera). when the browser's preferred language is chinese it limits the minimum possible font-size to 12px.

transform: scale(0.1) can be use to counter this restriction. it's still a pain to reposition the scaled down element though.

edited Sep 20 '22 at 12:51

answered Sep 20 '22 at 12:50

2yil

9
2

_"when the browser's preferred language is chinese it limits the minimum possible font-size to 12px."_ - I belive this is because Windows has a different `monospace` font-family for zh-CN. But using `transform: scale` is a crappy solution because you're creating a new stacking-context which will mess-up z-ordering. The **correct** solution, I feel, is to just explicitly specify `font-family: Consolas, monospace;`. [Also, **you really should not use `!important` as a bodge**](https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-a-css-property) – Dai Sep 20 '22 at 12:59
@Dai yeah `transform: scale()` defo isn't ideal, but i've already tried using different mono fonts and even tried putting `unicode-range: U+0020-007F;` in `@font-face` and it still didn't work ;/ – 2yil Sep 20 '22 at 13:06
Out of curiosity, what is the **computed style**'s `font-family` property value when using Chinese as the document language? – Dai Sep 20 '22 at 13:07
@Dai `font-family` remains the same regardless of language i think – 2yil Sep 20 '22 at 13:14

font size in pre element is limited to 12px

1 Answers1