博客 · 研究

十二个房间,一个红点都没抓到

2026 年 10 月 11 日 · 6 分钟阅读

整整两年,我在十二个房间里追一个红点。这是我学到的东西。

正文是单栏,每行大约 65 个英文字符(中文约 36 字),读起来最舒服。图片和图表可以从正文栏“探出去”:宽一点,或者铺满整个页面。

正文宽度
正文宽度:和文字一样宽。

红点从不乱跑。它沿直线前进,碰到镜子就拐弯,最后总停在一个我够不着的地方。把它的路线画下来,就是上面这张图。

加宽
加宽:两侧各多出一点,适合图表和截图组。

两个房间,两种路线:

你抓不到光,但你可以读懂它。
$ red-dot track ./living-room
→ 412 dots, 0 caught
铺满
铺满:从页面一边到另一边,给真正需要震撼力的图片。

提示

这是一个虚构的示例网站。

如果你家也有一个红点,试试看吧。它可能比你想的更好懂。

压力测试

下面是最坏情况:很长的链接、很长的代码行、没有标点的中文,以及六列的表格。页面不能出现横向滚动。

https://example.com/hairball/archive/red-dot-room-red-dot-room-red-dot-room-red-dot-room-red-dot-room-red-dot-room-red-dot-room-red-dot-room-red-dot-room-red-dot-room-red-dot-room-index.html

$ red-dot track ./room-01 ./room-02 ./room-03 ./room-04 ./room-05 ./room-06 ./room-07 ./room-08 ./room-09 ./room-10 ./room-11 ./room-12 ./room-13 ./room-14 ./room-15 ./room-16 ./room-17 ./room-18 ./room-19 ./room-20 ./room-21 ./room-22 ./room-23 ./room-24 ./room-25 ./room-26 ./room-27 ./room-28 ./room-29 ./room-30 ./room-31 ./room-32 ./room-33 ./room-34 ./room-35

红点沿着直线前进碰到镜子就拐弯最后总是停在一个我够不着的地方红点沿着直线前进碰到镜子就拐弯最后总是停在一个我够不着的地方红点沿着直线前进碰到镜子就拐弯最后总是停在一个我够不着的地方红点沿着直线前进碰到镜子就拐弯最后总是停在一个我够不着的地方

Room Dots Pounces Caught Mirrors Windows
Living room 412 96 0 1 2
Hallway 238 51 0 3 0
Bedroom 171 40 0 2 1
标记
<main class="f-reading f-page f-prose">
  <header class="f-reading__title">
    <p class="f-kicker">Blog · Research</p>
    <h1>Twelve Rooms, Zero Dots Caught</h1>
    <p class="f-meta">Oct 11, 2026 · 6 min read</p>
  </header>
  <p class="f-reading__lead">It started with one red dot.</p>
  <p>Text sits in the reading column.</p>
  <figure class="f-wide"><img src="board.jpg" alt="" /></figure>
  <figure class="f-full"><img src="horizon.jpg" alt="" /></figure>
</main>