Rename lineHeight to lineHeightInPixels to distinguish from CSS value

CSS has a line-height property with values like '1.3', but we also have a measured pixel value for line height. It's important to keep these separate conceptually.
2026-04-28 03:01:47 -04:00 · 2014-05-21 18:04:44 -06:00
parent 9cbc693c77
commit 9e3ce09658
12 changed files with 73 additions and 73 deletions
--- a/spec/display-buffer-spec.coffee
+++ b/spec/display-buffer-spec.coffee
@@ -948,7 +948,7 @@ describe "DisplayBuffer", ->
      it "returns the start and end positions of the marker based on the line height and character widths assigned to the DisplayBuffer", ->
        marker = displayBuffer.markScreenRange([[5, 10], [6, 4]])

-        displayBuffer.setLineHeight(20)
+        displayBuffer.setLineHeightInPixels(20)
        displayBuffer.setDefaultCharWidth(10)
        displayBuffer.setScopedCharWidths(["source.js", "keyword.control.js"], r: 11, e: 11, t: 11, u: 11, n: 11)

@@ -959,7 +959,7 @@ describe "DisplayBuffer", ->
  describe "::setScrollTop", ->
    beforeEach ->
      displayBuffer.manageScrollPosition = true
-      displayBuffer.setLineHeight(10)
+      displayBuffer.setLineHeightInPixels(10)

    it "disallows negative values", ->
      displayBuffer.setHeight(displayBuffer.getScrollHeight() + 100)
@@ -979,7 +979,7 @@ describe "DisplayBuffer", ->
  describe "::setScrollLeft", ->
    beforeEach ->
      displayBuffer.manageScrollPosition = true
-      displayBuffer.setLineHeight(10)
+      displayBuffer.setLineHeightInPixels(10)
      displayBuffer.setDefaultCharWidth(10)

    it "disallows negative values", ->
@@ -1000,7 +1000,7 @@ describe "DisplayBuffer", ->
  describe "::scrollToScreenPosition(position)", ->
    it "sets the scroll top and scroll left so the given screen position is in view", ->
      displayBuffer.manageScrollPosition = true
-      displayBuffer.setLineHeight(10)
+      displayBuffer.setLineHeightInPixels(10)
      displayBuffer.setDefaultCharWidth(10)
      displayBuffer.setHorizontalScrollbarHeight(0)

--- a/spec/editor-component-spec.coffee
+++ b/spec/editor-component-spec.coffee
@@ -39,7 +39,7 @@ describe "EditorComponent", ->
      component.setLineHeight(1.3)
      component.setFontSize(20)

-      lineHeightInPixels = editor.getLineHeight()
+      lineHeightInPixels = editor.getLineHeightInPixels()
      charWidth = editor.getDefaultCharWidth()
      node = component.getDOMNode()
      verticalScrollbarNode = node.querySelector('.vertical-scrollbar')
@@ -769,19 +769,19 @@ describe "EditorComponent", ->
    describe "when fontSize, fontFamily, or lineHeight changes while the editor is hidden", ->
      it "does not attempt to measure the lineHeight and defaultCharWidth until the editor becomes visible again", ->
        wrapperView.hide()
-        initialLineHeight = editor.getLineHeight()
+        initialLineHeightInPixels = editor.getLineHeightInPixels()
        initialCharWidth = editor.getDefaultCharWidth()

        component.setLineHeight(2)
-        expect(editor.getLineHeight()).toBe initialLineHeight
+        expect(editor.getLineHeightInPixels()).toBe initialLineHeightInPixels
        expect(editor.getDefaultCharWidth()).toBe initialCharWidth
        component.setFontSize(22)
-        expect(editor.getLineHeight()).toBe initialLineHeight
+        expect(editor.getLineHeightInPixels()).toBe initialLineHeightInPixels
        expect(editor.getDefaultCharWidth()).toBe initialCharWidth
        component.setFontFamily('monospace')
-        expect(editor.getLineHeight()).toBe initialLineHeight
+        expect(editor.getLineHeightInPixels()).toBe initialLineHeightInPixels
        expect(editor.getDefaultCharWidth()).toBe initialCharWidth

        wrapperView.show()
-        expect(editor.getLineHeight()).not.toBe initialLineHeight
+        expect(editor.getLineHeightInPixels()).not.toBe initialLineHeightInPixels
        expect(editor.getDefaultCharWidth()).not.toBe initialCharWidth
--- a/spec/editor-spec.coffee
+++ b/spec/editor-spec.coffee
@@ -696,7 +696,7 @@ describe "Editor", ->
        editor.manageScrollPosition = true
        editor.setVerticalScrollMargin(2)
        editor.setHorizontalScrollMargin(2)
-        editor.setLineHeight(10)
+        editor.setLineHeightInPixels(10)
        editor.setDefaultCharWidth(10)
        editor.setHorizontalScrollbarHeight(0)
        editor.setHeight(5.5 * 10)
@@ -1135,7 +1135,7 @@ describe "Editor", ->
      describe "when the 'autoscroll' option is true", ->
        it "autoscrolls to the selection", ->
          editor.manageScrollPosition = true
-          editor.setLineHeight(10)
+          editor.setLineHeightInPixels(10)
          editor.setDefaultCharWidth(10)
          editor.setHeight(50)
          editor.setWidth(50)
@@ -3123,7 +3123,7 @@ describe "Editor", ->
  describe ".scrollToCursorPosition()", ->
    it "scrolls the last cursor into view", ->
      editor.setCursorScreenPosition([8, 8])
-      editor.setLineHeight(10)
+      editor.setLineHeightInPixels(10)
      editor.setDefaultCharWidth(10)
      editor.setHeight(50)
      editor.setWidth(50)
@@ -3139,7 +3139,7 @@ describe "Editor", ->
    it "scrolls one screen height up or down", ->
      editor.manageScrollPosition = true

-      editor.setLineHeight(10)
+      editor.setLineHeightInPixels(10)
      editor.setHeight(50)
      expect(editor.getScrollHeight()).toBe 130

--- a/src/display-buffer.coffee
+++ b/src/display-buffer.coffee
@@ -23,7 +23,7 @@ class DisplayBuffer extends Model
    manageScrollPosition: false
    softWrap: null
    editorWidthInChars: null
-    lineHeight: null
+    lineHeightInPixels: null
    defaultCharWidth: null
    height: null
    width: null
@@ -198,8 +198,8 @@ class DisplayBuffer extends Model
    @setScrollLeft(scrollRight - @width)
    @getScrollRight()

-  getLineHeight: -> @lineHeight
-  setLineHeight: (@lineHeight) -> @lineHeight
+  getLineHeightInPixels: -> @lineHeightInPixels
+  setLineHeightInPixels: (@lineHeightInPixels) -> @lineHeightInPixels

  getDefaultCharWidth: -> @defaultCharWidth
  setDefaultCharWidth: (@defaultCharWidth) -> @defaultCharWidth
@@ -227,20 +227,20 @@ class DisplayBuffer extends Model
    @charWidthsByScope = {}

  getScrollHeight: ->
-    unless @getLineHeight() > 0
-      throw new Error("You must assign lineHeight before calling ::getScrollHeight()")
+    unless @getLineHeightInPixels() > 0
+      throw new Error("You must assign lineHeightInPixels before calling ::getScrollHeight()")

-    @getLineCount() * @getLineHeight()
+    @getLineCount() * @getLineHeightInPixels()

  getScrollWidth: ->
    (@getMaxLineLength() * @getDefaultCharWidth()) + @getCursorWidth()

  getVisibleRowRange: ->
-    unless @getLineHeight() > 0
-      throw new Error("You must assign a non-zero lineHeight before calling ::getVisibleRowRange()")
+    unless @getLineHeightInPixels() > 0
+      throw new Error("You must assign a non-zero lineHeightInPixels before calling ::getVisibleRowRange()")

-    heightInLines = Math.ceil(@getHeight() / @getLineHeight()) + 1
-    startRow = Math.floor(@getScrollTop() / @getLineHeight())
+    heightInLines = Math.ceil(@getHeight() / @getLineHeightInPixels()) + 1
+    startRow = Math.floor(@getScrollTop() / @getLineHeightInPixels())
    endRow = Math.min(@getLineCount(), startRow + heightInLines)

    [startRow, endRow]
@@ -254,7 +254,7 @@ class DisplayBuffer extends Model
    @intersectsVisibleRowRange(start.row, end.row + 1)

  scrollToScreenRange: (screenRange) ->
-    verticalScrollMarginInPixels = @getVerticalScrollMargin() * @getLineHeight()
+    verticalScrollMarginInPixels = @getVerticalScrollMargin() * @getLineHeightInPixels()
    horizontalScrollMarginInPixels = @getHorizontalScrollMargin() * @getDefaultCharWidth()

    {top, left, height, width} = @pixelRectForScreenRange(screenRange)
@@ -285,11 +285,11 @@ class DisplayBuffer extends Model
    if screenRange.end.row > screenRange.start.row
      top = @pixelPositionForScreenPosition(screenRange.start).top
      left = 0
-      height = (screenRange.end.row - screenRange.start.row + 1) * @getLineHeight()
+      height = (screenRange.end.row - screenRange.start.row + 1) * @getLineHeightInPixels()
      width = @getScrollWidth()
    else
      {top, left} = @pixelPositionForScreenPosition(screenRange.start)
-      height = @getLineHeight()
+      height = @getLineHeightInPixels()
      width = @pixelPositionForScreenPosition(screenRange.end).left - left

    {top, left, width, height}
@@ -512,7 +512,7 @@ class DisplayBuffer extends Model
    targetColumn = screenPosition.column
    defaultCharWidth = @defaultCharWidth

-    top = targetRow * @lineHeight
+    top = targetRow * @lineHeightInPixels
    left = 0
    column = 0
    for token in @lineForRow(targetRow).tokens
@@ -527,7 +527,7 @@ class DisplayBuffer extends Model
    targetTop = pixelPosition.top
    targetLeft = pixelPosition.left
    defaultCharWidth = @defaultCharWidth
-    row = Math.floor(targetTop / @getLineHeight())
+    row = Math.floor(targetTop / @getLineHeightInPixels())
    row = Math.min(row, @getLastRow())
    row = Math.max(0, row)

--- a/src/editor-component.coffee
+++ b/src/editor-component.coffee
@@ -42,7 +42,7 @@ EditorComponent = React.createClass
      scrollWidth = editor.getScrollWidth()
      scrollTop = editor.getScrollTop()
      scrollLeft = editor.getScrollLeft()
-      lineHeightInPixels = editor.getLineHeight()
+      lineHeightInPixels = editor.getLineHeightInPixels()
      horizontalScrollbarHeight = editor.getHorizontalScrollbarHeight()
      verticalScrollbarWidth = editor.getVerticalScrollbarWidth()
      verticallyScrollable = editor.verticallyScrollable()
@@ -54,13 +54,13 @@ EditorComponent = React.createClass
    div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
      GutterComponent {
        ref: 'gutter', editor, renderedRowRange, maxLineNumberDigits,
-        scrollTop, scrollHeight, lineHeight: lineHeightInPixels, fontSize, fontFamily,
+        scrollTop, scrollHeight, lineHeight, lineHeightInPixels, fontSize, fontFamily,
        @pendingChanges, onWidthChanged: @onGutterWidthChanged, @mouseWheelScreenRow
      }

      EditorScrollViewComponent {
        ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide,
-        lineHeight: lineHeightInPixels, renderedRowRange, @pendingChanges,
+        lineHeightInPixels, renderedRowRange, @pendingChanges,
        scrollTop, scrollLeft, scrollHeight, scrollWidth, @scrollingVertically,
        @cursorsMoved, @selectionChanged, @selectionAdded, cursorBlinkPeriod,
        cursorBlinkResumeDelay, @onInputFocused, @onInputBlurred, @mouseWheelScreenRow,
@@ -158,7 +158,7 @@ EditorComponent = React.createClass
    @subscribe editor.$height.changes, @requestUpdate
    @subscribe editor.$width.changes, @requestUpdate
    @subscribe editor.$defaultCharWidth.changes, @requestUpdate
-    @subscribe editor.$lineHeight.changes, @requestUpdate
+    @subscribe editor.$lineHeightInPixels.changes, @requestUpdate

  listenForDOMEvents: ->
    node = @getDOMNode()
--- a/src/editor-scroll-view-component.coffee
+++ b/src/editor-scroll-view-component.coffee
@@ -16,7 +16,7 @@ EditorScrollViewComponent = React.createClass
  overflowChangedWhilePaused: false

  render: ->
-    {editor, fontSize, fontFamily, lineHeight, showIndentGuide, invisibles, visible} = @props
+    {editor, fontSize, fontFamily, lineHeightInPixels, showIndentGuide, invisibles, visible} = @props
    {renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, scrollingVertically, mouseWheelScreenRow} = @props
    {selectionChanged, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay, cursorsMoved, onInputFocused, onInputBlurred} = @props

@@ -35,7 +35,7 @@ EditorScrollViewComponent = React.createClass

      CursorsComponent({editor, scrollTop, scrollLeft, cursorsMoved, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay})
      LinesComponent {
-        ref: 'lines', editor, fontSize, fontFamily, lineHeight, showIndentGuide,
+        ref: 'lines', editor, fontSize, fontFamily, lineHeightInPixels, showIndentGuide,
        renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
        selectionChanged, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
        visible
--- a/src/editor.coffee
+++ b/src/editor.coffee
@@ -149,7 +149,7 @@ class Editor extends Model
    'autoDecreaseIndentForBufferRow', 'toggleLineCommentForBufferRow', 'toggleLineCommentsForBufferRows',
    toProperty: 'languageMode'

-  @delegatesProperties '$lineHeight', '$defaultCharWidth', '$height', '$width',
+  @delegatesProperties '$lineHeightInPixels', '$defaultCharWidth', '$height', '$width',
    '$scrollTop', '$scrollLeft', 'manageScrollPosition', toProperty: 'displayBuffer'

  constructor: ({@softTabs, initialLine, initialColumn, tabLength, softWrap, @displayBuffer, buffer, registerEditor, suppressCursorCreation}) ->
@@ -1859,8 +1859,8 @@ class Editor extends Model
  getHorizontalScrollMargin: -> @displayBuffer.getHorizontalScrollMargin()
  setHorizontalScrollMargin: (horizontalScrollMargin) -> @displayBuffer.setHorizontalScrollMargin(horizontalScrollMargin)

-  getLineHeight: -> @displayBuffer.getLineHeight()
-  setLineHeight: (lineHeight) -> @displayBuffer.setLineHeight(lineHeight)
+  getLineHeightInPixels: -> @displayBuffer.getLineHeightInPixels()
+  setLineHeightInPixels: (lineHeightInPixels) -> @displayBuffer.setLineHeightInPixels(lineHeightInPixels)

  getScopedCharWidth: (scopeNames, char) -> @displayBuffer.getScopedCharWidth(scopeNames, char)
  setScopedCharWidth: (scopeNames, char, width) -> @displayBuffer.setScopedCharWidth(scopeNames, char, width)
--- a/src/gutter-component.coffee
+++ b/src/gutter-component.coffee
@@ -33,7 +33,7 @@ GutterComponent = React.createClass
  # non-zero-delta change to the screen lines has occurred within the current
  # visible row range.
  shouldComponentUpdate: (newProps) ->
-    return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'scrollTop', 'lineHeight', 'fontSize')
+    return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'fontSize')

    {renderedRowRange, pendingChanges} = newProps
    for change in pendingChanges when Math.abs(change.screenDelta) > 0 or Math.abs(change.bufferDelta) > 0
@@ -47,7 +47,7 @@ GutterComponent = React.createClass
      @removeLineNumberNodes()

    @measureWidth() unless @lastMeasuredWidth? and isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'fontSize', 'fontFamily')
-    @clearScreenRowCaches() unless oldProps.lineHeight is @props.lineHeight
+    @clearScreenRowCaches() unless oldProps.lineHeightInPixels is @props.lineHeightInPixels
    @updateLineNumbers()

  clearScreenRowCaches: ->
@@ -125,8 +125,8 @@ GutterComponent = React.createClass

  buildLineNumberHTML: (bufferRow, softWrapped, maxLineNumberDigits, screenRow) ->
    if screenRow?
-      {lineHeight} = @props
-      style = "position: absolute; top: #{screenRow * lineHeight}px;"
+      {lineHeightInPixels} = @props
+      style = "position: absolute; top: #{screenRow * lineHeightInPixels}px;"
    else
      style = "visibility: hidden;"
    innerHTML = @buildLineNumberInnerHTML(bufferRow, softWrapped, maxLineNumberDigits)
@@ -145,8 +145,8 @@ GutterComponent = React.createClass

  updateLineNumberNode: (lineNumberId, screenRow) ->
    unless @screenRowsByLineNumberId[lineNumberId] is screenRow
-      {lineHeight} = @props
-      @lineNumberNodesById[lineNumberId].style.top = screenRow * lineHeight + 'px'
+      {lineHeightInPixels} = @props
+      @lineNumberNodesById[lineNumberId].style.top = screenRow * lineHeightInPixels + 'px'
      @lineNumberNodesById[lineNumberId].dataset.screenRow = screenRow
      @screenRowsByLineNumberId[lineNumberId] = screenRow
      @lineNumberIdsByScreenRow[screenRow] = lineNumberId
--- a/src/lines-component.coffee
+++ b/src/lines-component.coffee
@@ -17,14 +17,14 @@ LinesComponent = React.createClass

  render: ->
    if @isMounted()
-      {editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, lineHeight} = @props
+      {editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, lineHeightInPixels} = @props
      style =
        height: scrollHeight
        width: scrollWidth
        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"

    div {className: 'lines', style},
-      SelectionsComponent({editor, lineHeight}) if @isMounted()
+      SelectionsComponent({editor, lineHeightInPixels}) if @isMounted()

  componentWillMount: ->
    @measuredLines = new WeakSet
@@ -33,11 +33,11 @@ LinesComponent = React.createClass
    @lineIdsByScreenRow = {}

  componentDidMount: ->
-    @measureLineHeightAndCharWidth()
+    @measurelineHeightInPixelsAndCharWidth()

  shouldComponentUpdate: (newProps) ->
    return true if newProps.selectionChanged
-    return true unless isEqualForProperties(newProps, @props,  'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeight', 'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible')
+    return true unless isEqualForProperties(newProps, @props,  'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeightInPixels', 'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible')

    {renderedRowRange, pendingChanges} = newProps
    for change in pendingChanges
@@ -46,8 +46,8 @@ LinesComponent = React.createClass
    false

  componentDidUpdate: (prevProps) ->
-    @measureLineHeightAndCharWidthIfNeeded(prevProps)
-    @clearScreenRowCaches() unless prevProps.lineHeight is @props.lineHeight
+    @measurelineHeightInPixelsAndCharWidthIfNeeded(prevProps)
+    @clearScreenRowCaches() unless prevProps.lineHeightInPixels is @props.lineHeightInPixels
    @removeLineNodes() unless isEqualForProperties(prevProps, @props, 'showIndentGuide', 'invisibles')
    @updateLines()
    @clearScopedCharWidths() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily')
@@ -79,7 +79,6 @@ LinesComponent = React.createClass
        node.removeChild(lineNode)

  appendOrUpdateVisibleLineNodes: (visibleLines, startRow) ->
-    {lineHeight} = @props
    newLines = null
    newLinesHTML = null

@@ -110,9 +109,10 @@ LinesComponent = React.createClass
    @lineNodesByLineId.hasOwnProperty(lineId)

  buildLineHTML: (line, screenRow) ->
-    {editor, mini, showIndentGuide, lineHeight} = @props
+    {editor, mini, showIndentGuide, lineHeightInPixels} = @props
    {tokens, text, lineEnding, fold, isSoftWrapped, indentLevel} = line
-    top = screenRow * lineHeight
+
+    top = screenRow * lineHeightInPixels
    lineHTML = "<div class=\"line\" style=\"position: absolute; top: #{top}px;\" data-screen-row=\"#{screenRow}\">"

    if text is ""
@@ -188,9 +188,9 @@ LinesComponent = React.createClass

  updateLineNode: (line, screenRow) ->
    unless @screenRowsByLineId[line.id] is screenRow
-      {lineHeight} = @props
+      {lineHeightInPixels} = @props
      lineNode = @lineNodesByLineId[line.id]
-      lineNode.style.top = screenRow * lineHeight + 'px'
+      lineNode.style.top = screenRow * lineHeightInPixels + 'px'
      lineNode.dataset.screenRow = screenRow
      @screenRowsByLineId[line.id] = screenRow
      @lineIdsByScreenRow[screenRow] = line.id
@@ -198,26 +198,26 @@ LinesComponent = React.createClass
  lineNodeForScreenRow: (screenRow) ->
    @lineNodesByLineId[@lineIdsByScreenRow[screenRow]]

-  measureLineHeightAndCharWidthIfNeeded: (prevProps) ->
+  measurelineHeightInPixelsAndCharWidthIfNeeded: (prevProps) ->
    {visible} = @props

-    unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeight')
+    unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeightInPixels')
      if visible
-        @measureLineHeightAndCharWidth()
+        @measurelineHeightInPixelsAndCharWidth()
      else
        @measureWhenShown = true
-    @measureLineHeightAndCharWidth() if visible and not prevProps.visible and @measureWhenShown
+    @measurelineHeightInPixelsAndCharWidth() if visible and not prevProps.visible and @measureWhenShown

-  measureLineHeightAndCharWidth: ->
+  measurelineHeightInPixelsAndCharWidth: ->
    @measureWhenShown = false
    node = @getDOMNode()
    node.appendChild(DummyLineNode)
-    lineHeight = DummyLineNode.getBoundingClientRect().height
+    lineHeightInPixels = DummyLineNode.getBoundingClientRect().height
    charWidth = DummyLineNode.firstChild.getBoundingClientRect().width
    node.removeChild(DummyLineNode)

    {editor} = @props
-    editor.setLineHeight(lineHeight)
+    editor.setLineHeightInPixels(lineHeightInPixels)
    editor.setDefaultCharWidth(charWidth)

  measureCharactersInNewLines: ->
--- a/src/react-editor-view.coffee
+++ b/src/react-editor-view.coffee
@@ -14,7 +14,7 @@ class ReactEditorView extends View

  getEditor: -> @editor

-  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeight()
+  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeightInPixels()
  Object.defineProperty @::, 'charWidth', get: -> @editor.getDefaultCharWidth()

  scrollTop: (scrollTop) ->
--- a/src/selection-component.coffee
+++ b/src/selection-component.coffee
@@ -6,7 +6,7 @@ SelectionComponent = React.createClass
  displayName: 'SelectionComponent'

  render: ->
-    {editor, screenRange, lineHeight} = @props
+    {editor, screenRange, lineHeightInPixels} = @props
    {start, end} = screenRange
    rowCount = end.row - start.row + 1
    startPixelPosition = editor.pixelPositionForScreenPosition(start)
@@ -19,18 +19,18 @@ SelectionComponent = React.createClass
        @renderMultiLineRegions(startPixelPosition, endPixelPosition, rowCount)

  renderSingleLineRegions: (startPixelPosition, endPixelPosition) ->
-    {lineHeight} = @props
+    {lineHeightInPixels} = @props

    [
      div className: 'region', key: 0, style:
        top: startPixelPosition.top
-        height: lineHeight
+        height: lineHeightInPixels
        left: startPixelPosition.left
        width: endPixelPosition.left - startPixelPosition.left
    ]

  renderMultiLineRegions: (startPixelPosition, endPixelPosition, rowCount) ->
-    {lineHeight} = @props
+    {lineHeightInPixels} = @props
    regions = []
    index = 0

@@ -39,7 +39,7 @@ SelectionComponent = React.createClass
      div className: 'region', key: index++, style:
        top: startPixelPosition.top
        left: startPixelPosition.left
-        height: lineHeight
+        height: lineHeightInPixels
        right: 0
    )

@@ -47,8 +47,8 @@ SelectionComponent = React.createClass
    if rowCount > 2
      regions.push(
        div className: 'region', key: index++, style:
-          top: startPixelPosition.top + lineHeight
-          height: (rowCount - 2) * lineHeight
+          top: startPixelPosition.top + lineHeightInPixels
+          height: (rowCount - 2) * lineHeightInPixels
          left: 0
          right: 0
      )
@@ -57,7 +57,7 @@ SelectionComponent = React.createClass
    regions.push(
      div className: 'region', key: index, style:
        top: endPixelPosition.top
-        height: lineHeight
+        height: lineHeightInPixels
        left: 0
        width: endPixelPosition.left
    )
--- a/src/selections-component.coffee
+++ b/src/selections-component.coffee
@@ -10,11 +10,11 @@ SelectionsComponent = React.createClass
    div className: 'selections', @renderSelections()

  renderSelections: ->
-    {editor, lineHeight} = @props
+    {editor, lineHeightInPixels} = @props

    selectionComponents = []
    for selectionId, screenRange of @selectionRanges
-      selectionComponents.push(SelectionComponent({key: selectionId, screenRange, editor, lineHeight}))
+      selectionComponents.push(SelectionComponent({key: selectionId, screenRange, editor, lineHeightInPixels}))
    selectionComponents

  componentWillMount: ->