Hide dots in line number column when soft wrap is on


When soft wrap is on, the line number column on the left side shows dots for lines that are wrapped (from the second “screen line” onwards).


I want to hide these dots so that only the line number is shown in the first “screen line”, and then just a blank space on the second “screen line” onwards.



I checked if I can do this via stylesheet, but it looks like the dots and the regular line numbers do not have any class distinction, so I can’t target any CSS on the dots.

Is this possible to do? The dots are big and distracting.


Are you interested in using DOM manipulation to replace with  ?


Care to explain?

But really, if you could just jab a special CSS class into that “dot-showing line number block”, customizing it would have been super easy! Can Atom core do that?


You can use JavaScript to replace one character with another, like in this fiddle.

Can Atom core do that?

It certainly could, but that would require changing the code.


That’s great. How do we do it inside Atom, to manipulate the line number display?


Do you mean in init.coffee? Or through altering the code of Atom’s source files so that the line number gutter has more useful classes?


Well I can’t really alter code of Atom (other than contributing on GitHub) so I’m looking for a more immediate solution of init.coffee. Sorry, total noob at hacking Atom here.


It’s really not tough. I just took that Fiddle I linked, fed it into a utility that converts JavaScript to CoffeeScript, changed the strings, and added an event listener to trigger it. I haven’t written any code for this.

It doesn’t work very well yet, because Atom redraws the dots when you scroll up or down, when you resize the window, and even (for some reason) when your cursor is on the line in question. But it does the thing.

nativeSelector = ->
  elements = document.querySelectorAll('atom-text-editor::shadow .line-number')
  results = []
  child = undefined
  i = 0
  while i < elements.length
    child = elements[i].childNodes[0]
    if elements[i].hasChildNodes() and child.nodeType == 3
      results.push child

replaceDots = ->
  textnodes = nativeSelector()
  _nv = undefined
  i = 0
  len = textnodes.length
  while i < len
    _nv = textnodes[i].nodeValue
    textnodes[i].nodeValue = _nv.replace(/•/g, ' ')

atom.workspace.observeTextEditors (editor) ->
  editor.onDidChange ->


I’ve thought about this today and I’m really not sure how to make it more aggressive without making it run constantly (which would be bad and make your Atom very slow). Using onDidChangeCursorPosition instead of (or in addition to) onDidChange would help when scrolling up or down with the cursor, but I can’t find a method that triggers when the viewable portion of the buffer changes.


I just tried it and I like it. It’s far from perfect but it does get the job done. Adding it for scrolling would be better. How about when editor tab is activated into view?

If I get some time (and I can figure out CoffeeScript) I’d look into how to add a special class onto the “dotted” line numbers.


Seems like onDidChangeCursorPosition is better since I can click anywhere to re-run the script. But it doesn’t work on scrolling with the mouse wheel. is there an onDidScroll ? :slight_smile:


Not in the public API. I’ve looked at all of the classes.


You could submit a PR that adds an additional class to line number elements signifying a wrap, so line numbers with numbers would be .line-number but line numbers with dots would be .line-number.wrap. Then you could add a simple rule like:

.line-number.wrap {
  visibility: hidden;

to your styles.less. (I just tested it in the DevTools and it looks like it works well.) Then there doesn’t need to be any crazy eventing stuff :grinning:


The other one should be .line-number.number :joy:

Anyway I will look into that possibility (first, I’d need some time to study where exactly I need to make that change).