Container query width

25–27 September 2025

Testing, cause

Some people on Twitter were testing my website, and found that some articles didn’t scale well on a smartphone held in portrait position, even when no images are involved. I found that this was caused by code fragments or extracts from log files, which I formatted using <pre>, and sometimes using <code>.

In the presence of a CSS max-width setting, running text can adapt to the horizontal screen width by adding more line wrapping points, so that fewer words fit on a text line. However, with code lines, this is impossible, because they already have their own, intentional line wrapping, which should stay intact. Then, it seems to me, the only way to make them fit in a smallish screen width, is to vary the font size.

Solution

Looking for solutions I found a page or pages which I failed to note, so I cannot reproduce any hyperlinks here. I do remember what I learned: a recent (2022) addition to CSS is that you can use units like vw and vh, by which you can size things, including fonts, as a percentage of size of the viewport. So 3vw means three percent of the current viewport’s width. Likewise 3vh refers to the viewport’s height.

I experimented with that, but it didn’t produce acceptable results in my situation. Yet there’s more: cqh and cqw refer to the height and width of a containing element. That worked for me. So in my central CSS file ../css/textfont.css" I added:
container-type: inline-size;
for my class rh-article-noad, which, now that I no longer have Adsense ads on my site, is the class of the <div> I use for the main text of nearly all of my articles. Then there’s the default setting pre {font-size: 3cqw;} .

That is adequate in most cases. Where it isn’t, I deviate from the default either in a
<style>…</style>
block in the <head> of a page, or individually for each preformatted bit of text, as follows:
<pre style="font-size: 2.2cqw;">, for example.

Examples

Examples of web pages where I used cqw:

ina-Latf.c, which is a small C program to convert text to an entity representation (e.g. &afr; for 𝔞) of Unicode Fraktur. 𝔗𝔥𝔢𝔶 𝔞𝔯𝔢 𝔥𝔬𝔴𝔢𝔳𝔢𝔯 𝔦𝔫 𝔣𝔞𝔠𝔱 𝔪𝔞𝔱𝔥𝔢𝔪𝔞𝔱𝔦𝔠𝔞𝔩 𝔰𝔶𝔪𝔟𝔬𝔩𝔰, 𝔫𝔬𝔱 𝔏𝔞𝔱𝔦𝔫 𝔩𝔢𝔱𝔱𝔢𝔯𝔰 𝔦𝔫 𝔞 𝔉𝔯𝔞𝔨𝔱𝔲𝔯 𝔣𝔬𝔫𝔱.
Folhas Verdes.
Mail tunnel.
Hwedwortehun (10), about a just intonation using factors 17 and 19.

Evaluation

Depending on the circumstances, the code fragments are sometimes in rather large type, and sometimes too small to be properly read. Then zooming in makes the text extend over the screen width, again confronting us with the need to scroll horizontally, which was what we were trying to eliminate in the first place. But such is life, I cannot think of a better solution right now.

Solved

24 September 2025, 10:30B

14 October 2025

I thought I had validated the cqw solution in the CSS and HTML Validator by w3.org, and that it passed. But yesterday I found that it doesn’t. Not surprising, seeing that cqw was introduced in 2022, and the validator (the batch version for HTML, anyway) dates from 2020.

So it looks like the validator needs an update, which might explain some of the messages I noticed while writing this article. Let’s wait and see. I won’t roll back my changes.