Android monospaced font size

Question

I am doing a graphical code editor where I can modify constants by dragging them. I want to highlight the commands in the code with blue rectangles such that left and right borders lay in the middle of characters, but the blue rectangles are still misaligned in some cases:

My idea is to first compute the char width and char space, and then multiply them afterwards by the position of my command in my text.

val mCodePaint = new TextPaint()
mCodePaint.setTypeface(Typeface.MONOSPACE)
mCodePaint.setAntiAlias(true)
mCodePaint.setSubpixelText(true)
mCodePaint.setColor(0xFF000000)
val dimText = new Rect()
val dimText1 = new Rect()
val dimText2 = new Rect()

final val s1 = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW"
final val s2 = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW"
// dimText1.width() = char_length * s1.length + space_between_chars*(s1.length-1)
// dimText2.width() = char_length * s2.length + space_between_chars*(s2.length-1)
def getCharWidth(): Float = {
  mCodePaint.getTextBounds(s1, 0, s1.length, dimText1)
  mCodePaint.getTextBounds(s2, 0, s2.length, dimText2)
  (dimText2.width() * (s1.length - 1) - dimText1.width() *(s2.length - 1))/(s1.length - s2.length)
}

def getIntercharWidth(): Float = {
  mCodePaint.getTextBounds(s1, 0, s1.length, dimText1)
  mCodePaint.getTextBounds(s2, 0, s2.length, dimText2)
  (dimText1.width * s2.length - dimText2.width * s1.length)/(s1.length - s2.length)
}

// The main function that draw the text
def drawRuleCode(canvas: Canvas, ...): Unit = {
  var char_width = getCharWidth() // At run time, equals 29
  var space_width = getIntercharWidth() // At run time, equals -10

  for(action <- ...) {
    ...
    val column = action.column
    val length = action.length
    val x1 = left_x+8 + column*char_width + (column-1)*space_width - 0.5f*space_width
    val x2 = x1 + length*char_width + (length-1)*space_width + 1*space_width
    rectFData.set(x1, y1, x2, y2)
    canvas.drawRoundRect(rectFData, 5, 5, selectPaint)
  }


  for(line <- ...) {
    ...
    canvas.drawText(s, left_x + 8, ..., mCodePaint)
  }

Do you have any idea on how to overcome that small alignment problem? Sometimes it makes a huge difference, especially when the expression is long.

EDIT: I drawed the computed text bounds, and actually they are wrong. The text is slightly larger than the rectangle given by getTextBounds (violet line):

Answer 1

Instead of using getTextBounds, I need to pass the scale argument, because the font size does not scale linearly with the canvas: Explanation here

 var c = new Matrix()
 val c_array = new Array[Float](9)

// The main function that draw the text
def drawRuleCode(canvas: Canvas, ...): Unit = {
  var box_width = getBoxWidth()

  canvas.getMatrix(c)
  c.getValues(c_array)
  val scale = c_array(Matrix.MSCALE_X)  // Compute the current matrix scale
  var box_width = getBoxWidth(scale)

  for(action <- ...) {
    ...
    val column = action.column
    val length = action.length
    val x1 = left_x+8 + column*box_width
    val x2 = x1 + length*box_width
    rectFData.set(x1, y1, x2, y2)
    canvas.drawRoundRect(rectFData, 5, 5, selectPaint)
  }

def getBoxWidth(scale: Float): Float = {
  mCodePaint.setTextSize(fontSize * scale)
  val result = mCodePaint.measureText(s1).toFloat / s1.length / scale
  mCodePaint.setTextSize(fontSize )
  result
}