Hacker News Reader

Comment by 38 | Hacker News Reader

> basic

1300 lines...

also, the line numbers dont actually align with the lines:

https://git.kernel.dk/cgit/liburing/tree/examples/proxy.c#n1...

There's something super weird going on with those line numbers. They don't align for me either (Firefox on Windows 11). In the web inspector, the line numbers are rendering with Courier New as the font, whereas the code itself is `monospace`.

The weird thing is both are controlled by a single CSS rule,

    div#cgit pre {
      font-family: "Source Code Pro", "Courier New", monospace;
    }

(Changing to just `monospace` fixes it.)

I'm not sure how two elements could have different fonts with that. I'm possibly missing something obscure, but it really feels like a browser bug.

Great sleuthing, the missing piece of the puzzle is that the file contents are inside a <code> element while the line numbers are not, and <code> elements have a default font so they don't inherit the font from their parent element. Changing the selector to the following fixes the issue:

  div#cgit pre, div#cgit code { ... }

(The buggy CSS is not present in the the official cgit repository, so I assume the owner of kernel.dk is running a patched version of cgit.)

FWIW it's about 800 lines excluding comments.

and yeah, this is why you don't abuse side-by-side divs ... actually, that's a table ... and instead just make your number unselectable (there are several ways to do this).

That's pretty small for a complete C application...

It aligns perfectly for me. Must've been mostly tested on Firefox.

I am on Firefox...

Doesn't work on Chrome too.

Needs .linenumbers { line-height: 12pt } but I think vertical line spacing within text node cannot be precisely controlled and is browser dependent.

Reply on news.ycombinator.com