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

[Andrew Suffield]

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.

[Marcin Kuzminski]

Could you possibly upload a file that will break the UI to demo.rhodecode.org server ?

[Andrew Suffield]

A quick poke around finds there's plenty there already. Here's a fairly gratuitous example:

http://demo.rhodecode.org/django/files/129f1ac8484d63c2e61a44fb2a18dd17246c1c4d/django/forms/models.py

[Marcin Kuzminski]

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

[Andrew Suffield]

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.

[Marcin Kuzminski]

Great, i'll run my windows box today to check and fix should be easy.

[Andrew Suffield]

For reference, the broken rendering looks like this: http://imgur.com/xoWK3

[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?

[Andrew Suffield]

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

[Eduard-Cristian Stefan]

That's Courier New, I just checked.

[Marcin Kuzminski]

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

[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:

https://bitbucket.org/zinzila/rhodecode-pam-authentication/commits/3fe56ee19692ec4e287efe680235824518b00b87

https://bitbucket.org/zinzila/rhodecode-pam-authentication/commits/b251b855b3a2332d5fc8d9245ad9581c351dc1ff

Note: there is also fix in helpers.py in this revision: https://bitbucket.org/zinzila/rhodecode-pam-authentication/commits/b251b855b3a2332d5fc8d9245ad9581c351dc1ff

[Marcin Kuzminski]

Awsome !!

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

[Alexey Larikov]

See pull request #89

[William Roush]

pull request #89 is rejected for various reasons, any idea when we'll see a fix in this for Rhodecode?

[Marcin Kuzminski]

Closing due to ticket being not valid anymore. Please check https://issues.rhodecode.com for current open tickets or to open a new one against latest 4.X releases.