Diskussionen » Greasy Fork Rückmeldungen

Inaccurate line-number alignment?

§
Veröffentlicht: 13.02.2015

Inaccurate line-number alignment?

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

woxxomMod
§
Veröffentlicht: 13.02.2015
Bearbeitet: 13.02.2015

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;
}
woxxomMod
§
Veröffentlicht: 13.02.2015

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

woxxomMod
§
Veröffentlicht: 13.02.2015
Bearbeitet: 13.02.2015

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
§
Veröffentlicht: 13.02.2015
Bearbeitet: 13.02.2015

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

woxxomMod
§
Veröffentlicht: 17.02.2015
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.

§
Veröffentlicht: 18.02.2015
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

Antwort schreiben

Anmelden um eine Antwort zu senden.