2025-12-03 22:00:29 +11:00
|
|
|
#include "TextBlock.h"
|
|
|
|
|
|
2025-12-08 22:06:09 +11:00
|
|
|
#include <GfxRenderer.h>
|
2026-02-13 12:16:39 +01:00
|
|
|
#include <Logging.h>
|
2025-12-03 22:00:29 +11:00
|
|
|
#include <Serialization.h>
|
|
|
|
|
|
2025-12-08 22:06:09 +11:00
|
|
|
void TextBlock::render(const GfxRenderer& renderer, const int fontId, const int x, const int y) const {
|
2025-12-28 13:59:44 +09:00
|
|
|
// Validate iterator bounds before rendering
|
|
|
|
|
if (words.size() != wordXpos.size() || words.size() != wordStyles.size()) {
|
2026-02-13 12:16:39 +01:00
|
|
|
LOG_ERR("TXB", "Render skipped: size mismatch (words=%u, xpos=%u, styles=%u)\n", (uint32_t)words.size(),
|
|
|
|
|
(uint32_t)wordXpos.size(), (uint32_t)wordStyles.size());
|
2025-12-28 13:59:44 +09:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (size_t i = 0; i < words.size(); i++) {
|
2026-02-21 22:28:56 -06:00
|
|
|
const int wordX = wordXpos[i] + x;
|
|
|
|
|
const EpdFontFamily::Style currentStyle = wordStyles[i];
|
|
|
|
|
renderer.drawText(fontId, wordX, y, words[i].c_str(), true, currentStyle);
|
feat: Add CSS parsing and CSS support in EPUBs (#411)
## Summary
* **What is the goal of this PR?**
- Adds basic CSS parsing to EPUBs and determine the CSS rules when
rendering to the screen so that text is styled correctly. Currently
supports bold, underline, italics, margin, padding, and text alignment
## Additional Context
- My main reason for wanting this is that the book I'm currently
reading, Carl's Doomsday Scenario (2nd in the Dungeon Crawler Carl
series), relies _a lot_ on styled text for telling parts of the story.
When text is bolded, it's supposed to be a message that's rendered
"on-screen" in the story. When characters are "chatting" with each
other, the text is bolded and their names are underlined. Plus, normal
emphasis is provided with italicizing words here and there. So, this
greatly improves my experience reading this book on the Xteink, and I
figured it was useful enough for others too.
- For transparency: I'm a software engineer, but I'm mostly frontend and
TypeScript/JavaScript. It's been _years_ since I did any C/C++, so I
would not be surprised if I'm doing something dumb along the way in this
code. Please don't hesitate to ask for changes if something looks off. I
heavily relied on Claude Code for help, and I had a lot of inspiration
from how [microreader](https://github.com/CidVonHighwind/microreader)
achieves their CSS parsing and styling. I did give this as good of a
code review as I could and went through everything, and _it works on my
machine_ 😄
### Before


### After


---
### AI Usage
Did you use AI tools to help write this code? **YES**, Claude Code
2026-02-05 05:28:10 -05:00
|
|
|
|
|
|
|
|
if ((currentStyle & EpdFontFamily::UNDERLINE) != 0) {
|
2026-02-21 22:28:56 -06:00
|
|
|
const std::string& w = words[i];
|
feat: Add CSS parsing and CSS support in EPUBs (#411)
## Summary
* **What is the goal of this PR?**
- Adds basic CSS parsing to EPUBs and determine the CSS rules when
rendering to the screen so that text is styled correctly. Currently
supports bold, underline, italics, margin, padding, and text alignment
## Additional Context
- My main reason for wanting this is that the book I'm currently
reading, Carl's Doomsday Scenario (2nd in the Dungeon Crawler Carl
series), relies _a lot_ on styled text for telling parts of the story.
When text is bolded, it's supposed to be a message that's rendered
"on-screen" in the story. When characters are "chatting" with each
other, the text is bolded and their names are underlined. Plus, normal
emphasis is provided with italicizing words here and there. So, this
greatly improves my experience reading this book on the Xteink, and I
figured it was useful enough for others too.
- For transparency: I'm a software engineer, but I'm mostly frontend and
TypeScript/JavaScript. It's been _years_ since I did any C/C++, so I
would not be surprised if I'm doing something dumb along the way in this
code. Please don't hesitate to ask for changes if something looks off. I
heavily relied on Claude Code for help, and I had a lot of inspiration
from how [microreader](https://github.com/CidVonHighwind/microreader)
achieves their CSS parsing and styling. I did give this as good of a
code review as I could and went through everything, and _it works on my
machine_ 😄
### Before


### After


---
### AI Usage
Did you use AI tools to help write this code? **YES**, Claude Code
2026-02-05 05:28:10 -05:00
|
|
|
const int fullWordWidth = renderer.getTextWidth(fontId, w.c_str(), currentStyle);
|
|
|
|
|
// y is the top of the text line; add ascender to reach baseline, then offset 2px below
|
|
|
|
|
const int underlineY = y + renderer.getFontAscenderSize(fontId) + 2;
|
|
|
|
|
|
|
|
|
|
int startX = wordX;
|
|
|
|
|
int underlineWidth = fullWordWidth;
|
|
|
|
|
|
|
|
|
|
// if word starts with em-space ("\xe2\x80\x83"), account for the additional indent before drawing the line
|
|
|
|
|
if (w.size() >= 3 && static_cast<uint8_t>(w[0]) == 0xE2 && static_cast<uint8_t>(w[1]) == 0x80 &&
|
|
|
|
|
static_cast<uint8_t>(w[2]) == 0x83) {
|
|
|
|
|
const char* visiblePtr = w.c_str() + 3;
|
2026-02-19 03:44:07 -06:00
|
|
|
const int prefixWidth = renderer.getTextAdvanceX(fontId, "\xe2\x80\x83", currentStyle);
|
feat: Add CSS parsing and CSS support in EPUBs (#411)
## Summary
* **What is the goal of this PR?**
- Adds basic CSS parsing to EPUBs and determine the CSS rules when
rendering to the screen so that text is styled correctly. Currently
supports bold, underline, italics, margin, padding, and text alignment
## Additional Context
- My main reason for wanting this is that the book I'm currently
reading, Carl's Doomsday Scenario (2nd in the Dungeon Crawler Carl
series), relies _a lot_ on styled text for telling parts of the story.
When text is bolded, it's supposed to be a message that's rendered
"on-screen" in the story. When characters are "chatting" with each
other, the text is bolded and their names are underlined. Plus, normal
emphasis is provided with italicizing words here and there. So, this
greatly improves my experience reading this book on the Xteink, and I
figured it was useful enough for others too.
- For transparency: I'm a software engineer, but I'm mostly frontend and
TypeScript/JavaScript. It's been _years_ since I did any C/C++, so I
would not be surprised if I'm doing something dumb along the way in this
code. Please don't hesitate to ask for changes if something looks off. I
heavily relied on Claude Code for help, and I had a lot of inspiration
from how [microreader](https://github.com/CidVonHighwind/microreader)
achieves their CSS parsing and styling. I did give this as good of a
code review as I could and went through everything, and _it works on my
machine_ 😄
### Before


### After


---
### AI Usage
Did you use AI tools to help write this code? **YES**, Claude Code
2026-02-05 05:28:10 -05:00
|
|
|
const int visibleWidth = renderer.getTextWidth(fontId, visiblePtr, currentStyle);
|
|
|
|
|
startX = wordX + prefixWidth;
|
|
|
|
|
underlineWidth = visibleWidth;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderer.drawLine(startX, underlineY, startX + underlineWidth, underlineY, true);
|
|
|
|
|
}
|
2025-12-03 22:00:29 +11:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-30 15:09:30 +10:00
|
|
|
bool TextBlock::serialize(FsFile& file) const {
|
2025-12-29 12:19:54 +10:00
|
|
|
if (words.size() != wordXpos.size() || words.size() != wordStyles.size()) {
|
2026-02-13 12:16:39 +01:00
|
|
|
LOG_ERR("TXB", "Serialization failed: size mismatch (words=%u, xpos=%u, styles=%u)\n", words.size(),
|
|
|
|
|
wordXpos.size(), wordStyles.size());
|
2025-12-29 12:19:54 +10:00
|
|
|
return false;
|
|
|
|
|
}
|
2025-12-03 22:00:29 +11:00
|
|
|
|
2025-12-29 12:19:54 +10:00
|
|
|
// Word data
|
2025-12-31 12:11:36 +10:00
|
|
|
serialization::writePod(file, static_cast<uint16_t>(words.size()));
|
2025-12-29 12:19:54 +10:00
|
|
|
for (const auto& w : words) serialization::writeString(file, w);
|
2025-12-23 14:14:10 +11:00
|
|
|
for (auto x : wordXpos) serialization::writePod(file, x);
|
|
|
|
|
for (auto s : wordStyles) serialization::writePod(file, s);
|
2025-12-03 22:00:29 +11:00
|
|
|
|
feat: Add CSS parsing and CSS support in EPUBs (#411)
## Summary
* **What is the goal of this PR?**
- Adds basic CSS parsing to EPUBs and determine the CSS rules when
rendering to the screen so that text is styled correctly. Currently
supports bold, underline, italics, margin, padding, and text alignment
## Additional Context
- My main reason for wanting this is that the book I'm currently
reading, Carl's Doomsday Scenario (2nd in the Dungeon Crawler Carl
series), relies _a lot_ on styled text for telling parts of the story.
When text is bolded, it's supposed to be a message that's rendered
"on-screen" in the story. When characters are "chatting" with each
other, the text is bolded and their names are underlined. Plus, normal
emphasis is provided with italicizing words here and there. So, this
greatly improves my experience reading this book on the Xteink, and I
figured it was useful enough for others too.
- For transparency: I'm a software engineer, but I'm mostly frontend and
TypeScript/JavaScript. It's been _years_ since I did any C/C++, so I
would not be surprised if I'm doing something dumb along the way in this
code. Please don't hesitate to ask for changes if something looks off. I
heavily relied on Claude Code for help, and I had a lot of inspiration
from how [microreader](https://github.com/CidVonHighwind/microreader)
achieves their CSS parsing and styling. I did give this as good of a
code review as I could and went through everything, and _it works on my
machine_ 😄
### Before


### After


---
### AI Usage
Did you use AI tools to help write this code? **YES**, Claude Code
2026-02-05 05:28:10 -05:00
|
|
|
// Style (alignment + margins/padding/indent)
|
|
|
|
|
serialization::writePod(file, blockStyle.alignment);
|
|
|
|
|
serialization::writePod(file, blockStyle.textAlignDefined);
|
|
|
|
|
serialization::writePod(file, blockStyle.marginTop);
|
|
|
|
|
serialization::writePod(file, blockStyle.marginBottom);
|
|
|
|
|
serialization::writePod(file, blockStyle.marginLeft);
|
|
|
|
|
serialization::writePod(file, blockStyle.marginRight);
|
|
|
|
|
serialization::writePod(file, blockStyle.paddingTop);
|
|
|
|
|
serialization::writePod(file, blockStyle.paddingBottom);
|
|
|
|
|
serialization::writePod(file, blockStyle.paddingLeft);
|
|
|
|
|
serialization::writePod(file, blockStyle.paddingRight);
|
|
|
|
|
serialization::writePod(file, blockStyle.textIndent);
|
|
|
|
|
serialization::writePod(file, blockStyle.textIndentDefined);
|
2025-12-29 12:19:54 +10:00
|
|
|
|
|
|
|
|
return true;
|
2025-12-03 22:00:29 +11:00
|
|
|
}
|
|
|
|
|
|
2025-12-30 15:09:30 +10:00
|
|
|
std::unique_ptr<TextBlock> TextBlock::deserialize(FsFile& file) {
|
2025-12-31 12:11:36 +10:00
|
|
|
uint16_t wc;
|
2026-02-21 22:28:56 -06:00
|
|
|
std::vector<std::string> words;
|
|
|
|
|
std::vector<uint16_t> wordXpos;
|
|
|
|
|
std::vector<EpdFontFamily::Style> wordStyles;
|
feat: Add CSS parsing and CSS support in EPUBs (#411)
## Summary
* **What is the goal of this PR?**
- Adds basic CSS parsing to EPUBs and determine the CSS rules when
rendering to the screen so that text is styled correctly. Currently
supports bold, underline, italics, margin, padding, and text alignment
## Additional Context
- My main reason for wanting this is that the book I'm currently
reading, Carl's Doomsday Scenario (2nd in the Dungeon Crawler Carl
series), relies _a lot_ on styled text for telling parts of the story.
When text is bolded, it's supposed to be a message that's rendered
"on-screen" in the story. When characters are "chatting" with each
other, the text is bolded and their names are underlined. Plus, normal
emphasis is provided with italicizing words here and there. So, this
greatly improves my experience reading this book on the Xteink, and I
figured it was useful enough for others too.
- For transparency: I'm a software engineer, but I'm mostly frontend and
TypeScript/JavaScript. It's been _years_ since I did any C/C++, so I
would not be surprised if I'm doing something dumb along the way in this
code. Please don't hesitate to ask for changes if something looks off. I
heavily relied on Claude Code for help, and I had a lot of inspiration
from how [microreader](https://github.com/CidVonHighwind/microreader)
achieves their CSS parsing and styling. I did give this as good of a
code review as I could and went through everything, and _it works on my
machine_ 😄
### Before


### After


---
### AI Usage
Did you use AI tools to help write this code? **YES**, Claude Code
2026-02-05 05:28:10 -05:00
|
|
|
BlockStyle blockStyle;
|
2025-12-03 22:00:29 +11:00
|
|
|
|
2025-12-29 12:19:54 +10:00
|
|
|
// Word count
|
2025-12-23 14:14:10 +11:00
|
|
|
serialization::readPod(file, wc);
|
2025-12-28 13:59:44 +09:00
|
|
|
|
2026-02-21 22:28:56 -06:00
|
|
|
// Sanity check: prevent allocation of unreasonably large vectors (max 10000 words per block)
|
2025-12-28 13:59:44 +09:00
|
|
|
if (wc > 10000) {
|
2026-02-13 12:16:39 +01:00
|
|
|
LOG_ERR("TXB", "Deserialization failed: word count %u exceeds maximum", wc);
|
2025-12-28 13:59:44 +09:00
|
|
|
return nullptr;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-29 12:19:54 +10:00
|
|
|
// Word data
|
2025-12-03 22:00:29 +11:00
|
|
|
words.resize(wc);
|
2025-12-29 12:19:54 +10:00
|
|
|
wordXpos.resize(wc);
|
|
|
|
|
wordStyles.resize(wc);
|
2025-12-23 14:14:10 +11:00
|
|
|
for (auto& w : words) serialization::readString(file, w);
|
|
|
|
|
for (auto& x : wordXpos) serialization::readPod(file, x);
|
|
|
|
|
for (auto& s : wordStyles) serialization::readPod(file, s);
|
2025-12-03 22:00:29 +11:00
|
|
|
|
feat: Add CSS parsing and CSS support in EPUBs (#411)
## Summary
* **What is the goal of this PR?**
- Adds basic CSS parsing to EPUBs and determine the CSS rules when
rendering to the screen so that text is styled correctly. Currently
supports bold, underline, italics, margin, padding, and text alignment
## Additional Context
- My main reason for wanting this is that the book I'm currently
reading, Carl's Doomsday Scenario (2nd in the Dungeon Crawler Carl
series), relies _a lot_ on styled text for telling parts of the story.
When text is bolded, it's supposed to be a message that's rendered
"on-screen" in the story. When characters are "chatting" with each
other, the text is bolded and their names are underlined. Plus, normal
emphasis is provided with italicizing words here and there. So, this
greatly improves my experience reading this book on the Xteink, and I
figured it was useful enough for others too.
- For transparency: I'm a software engineer, but I'm mostly frontend and
TypeScript/JavaScript. It's been _years_ since I did any C/C++, so I
would not be surprised if I'm doing something dumb along the way in this
code. Please don't hesitate to ask for changes if something looks off. I
heavily relied on Claude Code for help, and I had a lot of inspiration
from how [microreader](https://github.com/CidVonHighwind/microreader)
achieves their CSS parsing and styling. I did give this as good of a
code review as I could and went through everything, and _it works on my
machine_ 😄
### Before


### After


---
### AI Usage
Did you use AI tools to help write this code? **YES**, Claude Code
2026-02-05 05:28:10 -05:00
|
|
|
// Style (alignment + margins/padding/indent)
|
|
|
|
|
serialization::readPod(file, blockStyle.alignment);
|
|
|
|
|
serialization::readPod(file, blockStyle.textAlignDefined);
|
|
|
|
|
serialization::readPod(file, blockStyle.marginTop);
|
|
|
|
|
serialization::readPod(file, blockStyle.marginBottom);
|
|
|
|
|
serialization::readPod(file, blockStyle.marginLeft);
|
|
|
|
|
serialization::readPod(file, blockStyle.marginRight);
|
|
|
|
|
serialization::readPod(file, blockStyle.paddingTop);
|
|
|
|
|
serialization::readPod(file, blockStyle.paddingBottom);
|
|
|
|
|
serialization::readPod(file, blockStyle.paddingLeft);
|
|
|
|
|
serialization::readPod(file, blockStyle.paddingRight);
|
|
|
|
|
serialization::readPod(file, blockStyle.textIndent);
|
|
|
|
|
serialization::readPod(file, blockStyle.textIndentDefined);
|
2025-12-03 22:00:29 +11:00
|
|
|
|
feat: Add CSS parsing and CSS support in EPUBs (#411)
## Summary
* **What is the goal of this PR?**
- Adds basic CSS parsing to EPUBs and determine the CSS rules when
rendering to the screen so that text is styled correctly. Currently
supports bold, underline, italics, margin, padding, and text alignment
## Additional Context
- My main reason for wanting this is that the book I'm currently
reading, Carl's Doomsday Scenario (2nd in the Dungeon Crawler Carl
series), relies _a lot_ on styled text for telling parts of the story.
When text is bolded, it's supposed to be a message that's rendered
"on-screen" in the story. When characters are "chatting" with each
other, the text is bolded and their names are underlined. Plus, normal
emphasis is provided with italicizing words here and there. So, this
greatly improves my experience reading this book on the Xteink, and I
figured it was useful enough for others too.
- For transparency: I'm a software engineer, but I'm mostly frontend and
TypeScript/JavaScript. It's been _years_ since I did any C/C++, so I
would not be surprised if I'm doing something dumb along the way in this
code. Please don't hesitate to ask for changes if something looks off. I
heavily relied on Claude Code for help, and I had a lot of inspiration
from how [microreader](https://github.com/CidVonHighwind/microreader)
achieves their CSS parsing and styling. I did give this as good of a
code review as I could and went through everything, and _it works on my
machine_ 😄
### Before


### After


---
### AI Usage
Did you use AI tools to help write this code? **YES**, Claude Code
2026-02-05 05:28:10 -05:00
|
|
|
return std::unique_ptr<TextBlock>(
|
|
|
|
|
new TextBlock(std::move(words), std::move(wordXpos), std::move(wordStyles), blockStyle));
|
2025-12-03 22:00:29 +11:00
|
|
|
}
|