讨论 » Greasy Fork镜像 反馈

Inaccurate line-number alignment?

§
发表于:2015-02-13

Inaccurate line-number alignment?

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

woxxom管理员
§
发表于:2015-02-13
编辑于: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;
}
woxxom管理员
§
发表于:2015-02-13

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

woxxom管理员
§
发表于:2015-02-13
编辑于: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

woxxom管理员
§
发表于:2015-02-13
编辑于: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

woxxom管理员
§
发表于: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.

§
发表于: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

发表回复

登录(不可用)以发表回复

长期地址
遇到问题?请前往 GitHub 提 Issues。