Use font ascender height for baseline offset (#139)

## Summary

* Use font ascender height for baseline offset
* Previously was using font height, but when rendering the font (even
from y = 0), there would be a lot of top margin
* Font would also go below the "bottom of the line" as we were using the
full font height as the baseline

## Additional Context

* This caused some text to move around, I've fixed everything I can
* Notably it moves the first line of font a little closer to the top of
the page
This commit is contained in:
Dave Allie
2025-12-28 21:30:01 +10:00
committed by GitHub
parent 1c33162368
commit 41c93e4eba
6 changed files with 16 additions and 6 deletions

View File

@@ -85,7 +85,7 @@ void GfxRenderer::drawCenteredText(const int fontId, const int y, const char* te
void GfxRenderer::drawText(const int fontId, const int x, const int y, const char* text, const bool black, void GfxRenderer::drawText(const int fontId, const int x, const int y, const char* text, const bool black,
const EpdFontStyle style) const { const EpdFontStyle style) const {
const int yPos = y + getLineHeight(fontId); const int yPos = y + getFontAscenderSize(fontId);
int xpos = x; int xpos = x;
// cannot draw a NULL / empty string // cannot draw a NULL / empty string
@@ -276,6 +276,15 @@ int GfxRenderer::getSpaceWidth(const int fontId) const {
return fontMap.at(fontId).getGlyph(' ', REGULAR)->advanceX; return fontMap.at(fontId).getGlyph(' ', REGULAR)->advanceX;
} }
int GfxRenderer::getFontAscenderSize(const int fontId) const {
if (fontMap.count(fontId) == 0) {
Serial.printf("[%lu] [GFX] Font %d not found\n", millis(), fontId);
return 0;
}
return fontMap.at(fontId).getData(REGULAR)->ascender;
}
int GfxRenderer::getLineHeight(const int fontId) const { int GfxRenderer::getLineHeight(const int fontId) const {
if (fontMap.count(fontId) == 0) { if (fontMap.count(fontId) == 0) {
Serial.printf("[%lu] [GFX] Font %d not found\n", millis(), fontId); Serial.printf("[%lu] [GFX] Font %d not found\n", millis(), fontId);
@@ -291,7 +300,7 @@ void GfxRenderer::drawButtonHints(const int fontId, const char* btn1, const char
constexpr int buttonWidth = 106; constexpr int buttonWidth = 106;
constexpr int buttonHeight = 40; constexpr int buttonHeight = 40;
constexpr int buttonY = 40; // Distance from bottom constexpr int buttonY = 40; // Distance from bottom
constexpr int textYOffset = 5; // Distance from top of button to text baseline constexpr int textYOffset = 7; // Distance from top of button to text baseline
constexpr int buttonPositions[] = {25, 130, 245, 350}; constexpr int buttonPositions[] = {25, 130, 245, 350};
const char* labels[] = {btn1, btn2, btn3, btn4}; const char* labels[] = {btn1, btn2, btn3, btn4};

View File

@@ -74,6 +74,7 @@ class GfxRenderer {
void drawCenteredText(int fontId, int y, const char* text, bool black = true, EpdFontStyle style = REGULAR) const; void drawCenteredText(int fontId, int y, const char* text, bool black = true, EpdFontStyle style = REGULAR) const;
void drawText(int fontId, int x, int y, const char* text, bool black = true, EpdFontStyle style = REGULAR) const; void drawText(int fontId, int x, int y, const char* text, bool black = true, EpdFontStyle style = REGULAR) const;
int getSpaceWidth(int fontId) const; int getSpaceWidth(int fontId) const;
int getFontAscenderSize(int fontId) const;
int getLineHeight(int fontId) const; int getLineHeight(int fontId) const;
// UI Components // UI Components

View File

@@ -106,7 +106,7 @@ void HomeActivity::render() const {
renderer.drawCenteredText(READER_FONT_ID, 10, "CrossPoint Reader", true, BOLD); renderer.drawCenteredText(READER_FONT_ID, 10, "CrossPoint Reader", true, BOLD);
// Draw selection // Draw selection
renderer.fillRect(0, 60 + selectorIndex * 30 + 2, pageWidth - 1, 30); renderer.fillRect(0, 60 + selectorIndex * 30 - 2, pageWidth - 1, 30);
int menuY = 60; int menuY = 60;
int menuIndex = 0; int menuIndex = 0;

View File

@@ -410,7 +410,7 @@ void EpubReaderActivity::renderStatusBar(const int orientedMarginRight, const in
// Position status bar near the bottom of the logical screen, regardless of orientation // Position status bar near the bottom of the logical screen, regardless of orientation
const auto screenHeight = renderer.getScreenHeight(); const auto screenHeight = renderer.getScreenHeight();
const auto textY = screenHeight - orientedMarginBottom - 2; const auto textY = screenHeight - orientedMarginBottom + 2;
int percentageTextWidth = 0; int percentageTextWidth = 0;
int progressTextWidth = 0; int progressTextWidth = 0;

View File

@@ -116,7 +116,7 @@ void EpubReaderChapterSelectionActivity::renderScreen() {
renderer.drawCenteredText(READER_FONT_ID, 10, "Select Chapter", true, BOLD); renderer.drawCenteredText(READER_FONT_ID, 10, "Select Chapter", true, BOLD);
const auto pageStartIndex = selectorIndex / pageItems * pageItems; const auto pageStartIndex = selectorIndex / pageItems * pageItems;
renderer.fillRect(0, 60 + (selectorIndex % pageItems) * 30 + 2, pageWidth - 1, 30); renderer.fillRect(0, 60 + (selectorIndex % pageItems) * 30 - 2, pageWidth - 1, 30);
for (int i = pageStartIndex; i < epub->getSpineItemsCount() && i < pageStartIndex + pageItems; i++) { for (int i = pageStartIndex; i < epub->getSpineItemsCount() && i < pageStartIndex + pageItems; i++) {
const int tocIndex = epub->getTocIndexForSpineIndex(i); const int tocIndex = epub->getTocIndexForSpineIndex(i);
if (tocIndex == -1) { if (tocIndex == -1) {

View File

@@ -171,7 +171,7 @@ void FileSelectionActivity::render() const {
} }
const auto pageStartIndex = selectorIndex / PAGE_ITEMS * PAGE_ITEMS; const auto pageStartIndex = selectorIndex / PAGE_ITEMS * PAGE_ITEMS;
renderer.fillRect(0, 60 + (selectorIndex % PAGE_ITEMS) * 30 + 2, pageWidth - 1, 30); renderer.fillRect(0, 60 + (selectorIndex % PAGE_ITEMS) * 30 - 2, pageWidth - 1, 30);
for (int i = pageStartIndex; i < files.size() && i < pageStartIndex + PAGE_ITEMS; i++) { for (int i = pageStartIndex; i < files.size() && i < pageStartIndex + PAGE_ITEMS; i++) {
auto item = files[i]; auto item = files[i];
int itemWidth = renderer.getTextWidth(UI_FONT_ID, item.c_str()); int itemWidth = renderer.getTextWidth(UI_FONT_ID, item.c_str());