Annotation lines fail to line up on files which contain italics and windows chrome

Issue #553 resolved
Andrew Suffield created an issue

The conditions needed to reproduce the bug are:

  • a source file which would have some text rendered in italic. I used a C file with many comments in it
  • a windows web browser. I used Chrome 21

The annotated source view will show the line numbers and annotations starting some distance below the top of their box. Closer investigation will show that all columns have the same number of lines in them, but all line numbers and annotations are 15px high, while all bits of source code that are in italics are 16px high, ruining the whole layout.

This is a combination of the unfortunate windows font rendering behavior, where asking for italics makes your text one pixel higher, and some misplaced CSS. Some well-meaning person has placed line-height: 15px on div.code-highlight, but setting line-height on a block element containing inline elements (like the spans wrapping all text) only defines a minimum line height for the text contained within them.

In order to set the line height to a fixed value, either set line-height on the inline span elements themselves, or make the spans inline-block elements. I think.

Comments (15)

  1. Marcin Kuzminski repo owner

    Could you possibly upload a file that will break the UI to server ?

  2. Marcin Kuzminski repo owner

    This issue is only for windows ? because the link you sent looks fine on my chromium on linux.

  3. Andrew Suffield reporter

    It will definitely not happen on linux. The windows font renderer is the only one I'm aware of which changes text size this way.

  4. Eduard-Cristian Stefan

    In Chrome 23 everything seems fine, using custom fonts (Liberation family, minimum size: 10, default size: 16) at any zoom level. What fonts are you using?

  5. Andrew Suffield reporter

    Whatever you get when you install chrome on windows 7 and then don't change anything.

  6. Marcin Kuzminski repo owner

    Hmm i see the issues on windows, but setting line-height or height to 15px doesn't really help a lot (some elements still renders as 16px) i think i need some CSS expert

  7. Alexey Larikov

    I've fixed this issue. I've also reworked formatting for annotate and file view. Now it uses table layout, so it won't break anywhere. Check these commits:

    Note: there is also fix in in this revision:

  8. Marcin Kuzminski repo owner

    Awsome !!

    anychance you can squash those commits into one so i can easily cherry pick this from your fork ?

  9. Log in to comment