Discussions » Greasy Fork Feedback

Inaccurate line-number alignment?

§
Posted: 2015-02-13

Inaccurate line-number alignment?

Example:
http://greasyfork.org/scripts/2600/code (See the attached screenshot. )

wOxxOmMod
§
Posted: 2015-02-13
Edited: 2015-02-13

Yup, line-height should be specified in ems for both parts, for example:

.CodeRay .line-numbers {
    line-height: 1em;
}
.CodeRay .code {
    line-height: 1em;
}

BTW, currently the code container is severely limited by width to a laughable 960px with an ultimately inconvenient scrollbar on the very bottom of the page, it'd be more useful to show the code uncut at the right and let it overflow the browser window if needed even at the cost of the site header scrolling out of view on the first code page where it's still visible (well, this can be avoided with position:fixed but why bother):

#code-container {
    overflow: visible!important;
}
§
Posted: 2015-02-13

Yeah, I've seen that before. The problem is that the syntax highlighter expects all lines to be the same height, but not all characters are the same height, especially when you get into other languages. I could set a larger line height, but then everything gets spaced out more, whether it needs it or not. I'll try playing around with the heights to get it right.

wOxxOmMod
§
Posted: 2015-02-13

And what's wrong with simply setting the height to 1em or 1.3em (more air)? Like, nothing?

§
Posted: 2015-02-13

Looks spaced out, less visible on screen. I'm going to try the minimum it'll need, at least for the Chinese characters in that script.

wOxxOmMod
§
Posted: 2015-02-13
Edited: 2015-02-13

Spaced out, really? You should just shrink the font size a little and, more importantly, reduce the tabs from gigantic 8 spaces to 4 which is kinda standard for js. And remove that width overflow restriction which is by far more harmful to visibility, coupled with the the 8-spaces tab.

1em, font-size: 9pt:

1em


1.2em, font-size: 9pt:

image


1.3em, font-size: 9pt:

1em

wOxxOmMod
§
Posted: 2015-02-13
Edited: 2015-02-13

And here's an example with 4-space tab:

#code-container {
    overflow: visible !important;

    font-size: 9pt;
    line-height: 1.2em;

    -moz-tab-size: 4;
    tab-size: 4;
}

image

§
Posted: 2015-02-17

1em seems fine for a line height with the existing font size. I also changed the tab width from 8 (browser default) to 4.

The code box has JS on it that fixes the height to the window height when it adds horizontal scrolling. That way, if you're at the bottom of the page, code box fills the height and the horizontal scrollbar is visible. Is this not working for you?

wOxxOmMod
§
Posted: 2015-02-17
code box fills the height and the horizontal scrollbar is visible. Is this not working for you?

Well, see the attachments. Intentional or not, it's totally lame, this is why I override it with Stylish.

§
Posted: 2015-02-18
1em seems fine for a line height with the existing font size. I also changed the tab width from 8 (browser default) to 4.

The code box has JS on it that fixes the height to the window height when it adds horizontal scrolling. That way, if you're at the bottom of the page, code box fills the height and the horizontal scrollbar is visible. Is this not working for you?

Looks much better now. Thanks for your effort.
Just a suggestion. Would you fix the line number column at the left edge so that scrolling to the right will not render the line numbers invisible?
Example: http://codepen.io/ajkochanowicz/pen/KHdih

§
Posted: 2015-02-18

If you toss together a script that does that I can see how it'll work.

Post reply

Sign in to post a reply.