From 2fc8076139e07b2b1f6ecd330de0b548947c968c Mon Sep 17 00:00:00 2001
From: poire-z <poire-z@users.noreply.github.com>
Date: Sun, 8 Oct 2017 17:50:05 +0200
Subject: [PATCH] Better vertical centering of text in its box

Decide baseline vertical position according to font metrics, instead
of the hardcoded 0.7 (in textwidget, which made the text a little
bit up in its box), and 0.75 (in toggleswitch, which made the text a
little bit down in its box). This usually gives a value around 0.72
or 0.73 with our ui fonts, which looks about right.
ReaderFooter: add bottom padding, now that our text goes a few pixels lower
---
 frontend/apps/reader/modules/readerfooter.lua |  2 ++
 frontend/ui/widget/textwidget.lua             | 20 +++++++++++++++++--
 frontend/ui/widget/toggleswitch.lua           |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/apps/reader/modules/readerfooter.lua b/frontend/apps/reader/modules/readerfooter.lua
index 9641a081f..689216fcd 100644
--- a/frontend/apps/reader/modules/readerfooter.lua
+++ b/frontend/apps/reader/modules/readerfooter.lua
@@ -116,6 +116,7 @@ local ReaderFooter = WidgetContainer:extend{
     height = Screen:scaleBySize(DMINIBAR_CONTAINER_HEIGHT),
     horizontal_margin = Screen:scaleBySize(10),
     text_left_margin = Screen:scaleBySize(10),
+    bottom_padding = Screen:scaleBySize(1),
     settings = {},
     -- added to expose them to unit tests
     textGeneratorMap = footerTextGeneratorMap,
@@ -186,6 +187,7 @@ function ReaderFooter:init()
         background = Blitbuffer.COLOR_WHITE,
         bordersize = 0,
         padding = 0,
+        padding_bottom = self.bottom_padding,
     }
     self.footer_container = BottomContainer:new{
         dimen = Geom:new{ w = 0, h = self.height*2 },
diff --git a/frontend/ui/widget/textwidget.lua b/frontend/ui/widget/textwidget.lua
index 7d87826fe..57bd86547 100644
--- a/frontend/ui/widget/textwidget.lua
+++ b/frontend/ui/widget/textwidget.lua
@@ -14,7 +14,9 @@ Example:
 
 local Blitbuffer = require("ffi/blitbuffer")
 local Geom = require("ui/geometry")
+local Math = require("optmath")
 local RenderText = require("ui/rendertext")
+local Size = require("ui/size")
 local Widget = require("ui/widget/widget")
 local Screen = require("device").screen
 
@@ -23,10 +25,12 @@ local TextWidget = Widget:new{
     face = nil,
     bold = nil,
     fgcolor = Blitbuffer.COLOR_BLACK,
+    padding = Size.padding.small, -- should padding be function of face.size ?
     max_width = nil,
     _bb = nil,
     _length = 0,
     _height = 0,
+    _baseline_h = 0,
     _maxlength = 1200,
 }
 
@@ -44,7 +48,19 @@ function TextWidget:updateSize()
     else
         self._length = math.ceil(tsize.x)
     end
-    self._height = math.ceil(self.face.size * 1.5)
+    -- Used to be:
+    --   self._height = math.ceil(self.face.size * 1.5)
+    --   self._baseline_h = self._height*0.7
+    -- But better compute baseline alignment from freetype font metrics
+    -- to get better vertical centering of text in box
+    -- (Freetype doc on this at https://www.freetype.org/freetype2/docs/tutorial/step2.html)
+    local face_height, face_ascender = self.face.ftface:getHeightAndAscender()
+    self._height = math.ceil(face_height) + 2*self.padding
+    self._baseline_h = Math.round(face_ascender) + self.padding
+    -- With our UI fonts, this usually gives 0.72 to 0.74, so text is aligned
+    -- a bit lower than before with the hardcoded 0.7
+    -- require("logger").warn("1.5*face.size:", self.face.size * 1.5, "face_height:", face_height, "self._height:", self._height)
+    -- require("logger").warn("self._height ratio:", 1.0*self._baseline_h/self._height)
 end
 
 function TextWidget:getSize()
@@ -70,7 +86,7 @@ function TextWidget:paintTo(bb, x, y)
     --end
     --bb:blitFrom(self._bb, x, y, 0, 0, self._length, self._bb:getHeight())
     --@TODO Don't use kerning for monospaced fonts.    (houqp)
-    RenderText:renderUtf8Text(bb, x, y+self._height*0.7, self.face, self.text, true, self.bold,
+    RenderText:renderUtf8Text(bb, x, y+self._baseline_h, self.face, self.text, true, self.bold,
                 self.fgcolor, self.max_width and self.max_width or self.width)
 end
 
diff --git a/frontend/ui/widget/toggleswitch.lua b/frontend/ui/widget/toggleswitch.lua
index 8b80ed0d0..385ff0e44 100644
--- a/frontend/ui/widget/toggleswitch.lua
+++ b/frontend/ui/widget/toggleswitch.lua
@@ -29,7 +29,7 @@ local ToggleLabel = TextWidget:new{
 }
 
 function ToggleLabel:paintTo(bb, x, y)
-    RenderText:renderUtf8Text(bb, x, y+self._height*0.75, self.face, self.text, true, self.bold, self.fgcolor)
+    RenderText:renderUtf8Text(bb, x, y+self._baseline_h, self.face, self.text, true, self.bold, self.fgcolor)
 end
 
 local ToggleSwitch = InputContainer:new{