Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Line-start delimiter stays fixed when scrolling #171

Merged
merged 1 commit into from

2 participants

@GeorgeTzellis

Between the line-number indicator and the editor area, there's a line that indicates where the start of each line is.
This delimiter stays fixed instead of scrolling with #css and #html.
(an effect most noticeable in vertical view).

This commit fixes the issue.

@LeaVerou
Owner

Hi, thanks for the contribution!

Could you explain a bit more what this patch solves? I’m not sure I follow. A screenshot of the issue would be helpful.

@GeorgeTzellis
  1. There's a vertical line running down the left side of the editor, indicating where the start of the line is.
    Line start indicator after scroll

  2. When you scroll the edit area, the line start indicator stays in place, instead of scrolling with the editor
    Line start indicator

Also, with the current CSS, the line doesn't appear at all in Chrome Dev in OSX (it appears in FF and Safari)

@LeaVerou
Owner

Oh wow, that’s pretty awful. Thanks for the fix! Merging.

@LeaVerou LeaVerou merged commit caf32a6 into LeaVerou:master
@GeorgeTzellis

This was merged for a while, then reverted.
I'll send a new pull request soon.

@LeaVerou
Owner

Ok! I think the issue can be fixed pretty easily: Just set background-attachment: local; to the gradient that makes the vertical line. It won't work in Firefox for now, but it will once FF supports background-attachment: local.

@GeorgeTzellis
.editor.page {background-attachment: local}

This would work in WebKit, but unfortunately breaks the custom scroll-bars' background.
(I'm not going to put the effort into fixing those).
Any changes to the editable area's padding-left will have to be manually duplicated for the parent section's background-position.

.editor.page > pre {background-origin: content-box}

Any changes made to the editable area's padding-left will be reflected on the line-delimiter's position automatically.
I suppose that means it's easier to implement a responsive design.

Weigh each case, and let me know.

@LeaVerou
Owner

Are you sure it's not because you've specified the same background-attachment for all background layers?
You can include multiple, like (random example): background-attachment: local, scroll, local;

@GeorgeTzellis

Works if I switch the backgrounds around, setting background: gradient, noise; attachment: local, scroll
I'd still go the background-origin route, but it's your call.

@LeaVerou
Owner

If it works that way, wouldn't it work with background-attachment: scroll, local;?
If we go the background-origin route, are there other changes required too? I remember this pull request had quite a lot of changes, and I have a hunch it doesn't really need that many.
(Yes, I know I could answer these questions pretty easily by looking into it myself; however I really don't have the time right now)

@GeorgeTzellis

background-attachment: local, background-attachment: local, local
scrollbar background appears white

background-attachment: local, scroll
scrollbar background appears white with noise

(I suppose the gradient's transparency allows the scrollbar's default white color to show).

In the pull request,
background-size: 2px auto was set to prevent a rendering bug in WebKit (gradient wouldn't appear without it. In fact, after further testing, I see auto should be turned to 100%, or WebKit won't render it if there aren't enough lines)
min-height: 100% was set to extend the editable area over the whole editor page. Preferred over height: 100% because that causes jitters when using the arrow keys to move the caret beyond the last line.
box-sizing: border-box prevents scrollbars when they are unnecessary.

@GeorgeTzellis GeorgeTzellis referenced this pull request from a commit
@GeorgeTzellis GeorgeTzellis Line-delimiter scrolls (#171), is unobtrusive
The line-delimiter used to remain at the same position when the editor scrolled horizontally, betraying its function.

The new line-delimiter also limits itself to the content you've written.
You can now tell when there are empty lines at the end of your input, and distinguish between 1 empty line and 10.
I think this is a good pairing with the unobtrusive design of the line-number indicator.
6b54d1d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 21, 2012
  1. @GeorgeTzellis
This page is out of date. Refresh to see the latest.
Showing with 6 additions and 2 deletions.
  1. +6 −2 style/style.css
View
8 style/style.css
@@ -193,8 +193,7 @@ html.supports-range label.slider {
height: 100%;
box-sizing: border-box;
overflow: auto;
- background: url(/img/noise.png),
- linear-gradient(left, hsl(24,20%,91%) 1px, transparent 1px) 2.8em 0 no-repeat;
+ background: url(/img/noise.png);
background-color: hsl(24, 20%, 95%);
font: 100%/1.5 Monaco, Consolas, Inconsolata, 'Deja Vu Sans Mono', 'Droid Sans Mono', 'Andale Mono', 'Lucida Console', monospace;
tab-size: 4;
@@ -226,10 +225,15 @@ body[data-seethrough] .editor.page > pre > span.token {
.editor.page > pre {
position: relative;
padding: 1em 1.5em 1em 3em;
+ background: linear-gradient(left, hsl(24,20%,91%) 1px, transparent 1px) -3px 0 repeat-y;
+ background-size: 2px auto;
+ background-origin: content-box;
overflow: visible;
word-wrap: normal;
font: inherit;
outline: none;
+ min-height: 100%;
+ box-sizing: border-box;
}
#result {
Something went wrong with that request. Please try again.