Skip to content

feat: Add percentage support to CSS properties#738

Merged
daveallie merged 2 commits intocrosspoint-reader:masterfrom
jdk2pq:feat/add-percentage-support-to-css-properties
Feb 8, 2026
Merged

feat: Add percentage support to CSS properties#738
daveallie merged 2 commits intocrosspoint-reader:masterfrom
jdk2pq:feat/add-percentage-support-to-css-properties

Conversation

@jdk2pq
Copy link
Contributor

@jdk2pq jdk2pq commented Feb 7, 2026

Summary

What is the goal of this PR?

  • Adds percentage-based value support to CSS properties that accept percentages (padding, margin, text-indent)

What changes are included?

  • Adds Percent as another CSS unit
  • Passes the viewport width to fromCssStyle so that we can resolve percentage-based values
  • Adds a fallback of using an emspace for text-indent if we have an unresolvable value for whatever reason

Additional Context

  • This was missed in my CSS support feature, and the fallback when we encounter a percentage value is to use px instead. This means 5% (which would be ~30px on the screen) turns into 5px. When percentages are used in text-indent, this fallback behavior makes the indent look like a single space character. Whoops! 😬

My test EPUB has been updated here with percentage based CSS values at the end of the book.

AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing, please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? YES, Claude Code

@jdk2pq
feat: Add percentage support to CSS properties
e2a311c 
- Closes crosspoint-reader#730
- This was missed in my CSS support feature, and the fallback when we encounter a percentage value is to use px instead. This means 5% (which would be ~30px on the screen) turns into 5px. When percentages are used in `text-indent`, this fallback behavior makes the indent look like a single space character. Whoops!
@jdk2pq jdk2pq added the reader Related to the core reader experience label Feb 7, 2026
@jdk2pq jdk2pq mentioned this pull request Feb 7, 2026
Closed
@Eloren1
Copy link
Contributor

Eloren1 commented Feb 7, 2026

image

Can you also rename Embedded Style to Book Embedded Style so it shows the relation to the book file more clearly? And it matches with the Book's Style as well. Thank you

@jdk2pq jdk2pq mentioned this pull request Feb 7, 2026
Merged
@jdk2pq
Copy link
Contributor Author

jdk2pq commented Feb 7, 2026

image Can you also rename `Embedded Style` to `Book Embedded Style` so it shows the relation to the book file more clearly? And it matches with the `Book's Style` as well. Thank you

@Eloren1 I added a separate PR for this here, since I didn't want to do two things at once in this PR.

@Eloren1
Copy link
Contributor

Eloren1 commented Feb 7, 2026 •
edited
Loading

I appreciate your work with feedback, you managed to convince a skeptical user to enable this feature :))

Eloren1
Eloren1 approved these changes Feb 7, 2026
View reviewed changes
Copy link
Contributor

@Eloren1 Eloren1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After clearing the cache, it looks the way it was intended

Image

@jdk2pq
Copy link
Contributor Author

jdk2pq commented Feb 7, 2026

@Eloren1 Very glad to hear it! 😄 Thank you for the feedback!

@lukestein lukestein requested a review from a team February 7, 2026 19:15
osteotek pushed a commit that referenced this pull request Feb 8, 2026
@jdk2pq
refactor: Rename "Embedded Style" to "Book's Embedded Style" (#746)
67ddd60 
## Summary

**What is the goal of this PR?**
- Just a simple rename after feedback in #738

**What changes are included?**
- Renamed "Embedded Style" to "Book's Embedded Style" to more clearly
associate it with "Book's Style" option in "Paragraph Alignment"
settings

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**NO**_
daveallie pushed a commit that referenced this pull request Feb 8, 2026
@jdk2pq @daveallie
refactor: Rename "Embedded Style" to "Book's Embedded Style" (#746)
5e52a46 
## Summary

**What is the goal of this PR?**
- Just a simple rename after feedback in #738

**What changes are included?**
- Renamed "Embedded Style" to "Book's Embedded Style" to more clearly
associate it with "Book's Style" option in "Paragraph Alignment"
settings

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**NO**_
lukestein pushed a commit to lukestein/crosspoint-reader that referenced this pull request Feb 8, 2026
@jdk2pq @lukestein
refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspo…
85360d1 
…int-reader#746)

## Summary

**What is the goal of this PR?**
- Just a simple rename after feedback in crosspoint-reader#738

**What changes are included?**
- Renamed "Embedded Style" to "Book's Embedded Style" to more clearly
associate it with "Book's Style" option in "Paragraph Alignment"
settings

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**NO**_
lukestein pushed a commit to lukestein/crosspoint-reader that referenced this pull request Feb 8, 2026
@jdk2pq @lukestein
refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspo…
c4a5c7f 
…int-reader#746)

## Summary

**What is the goal of this PR?**
- Just a simple rename after feedback in crosspoint-reader#738

**What changes are included?**
- Renamed "Embedded Style" to "Book's Embedded Style" to more clearly
associate it with "Book's Style" option in "Paragraph Alignment"
settings

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**NO**_
lukestein pushed a commit to lukestein/crosspoint-reader that referenced this pull request Feb 8, 2026
@jdk2pq @lukestein
refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspo…
e583da9 
…int-reader#746)

## Summary

**What is the goal of this PR?**
- Just a simple rename after feedback in crosspoint-reader#738

**What changes are included?**
- Renamed "Embedded Style" to "Book's Embedded Style" to more clearly
associate it with "Book's Style" option in "Paragraph Alignment"
settings

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**NO**_
lukestein
lukestein approved these changes Feb 8, 2026
View reviewed changes
Copy link
Contributor

@lukestein lukestein left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on device and seems to work well. Recommend we get this in 1.0.0 if we're doing another RC (everything should get publicly tested at least briefly), or else it's for 1.0.1.

@Eloren1
Copy link
Contributor

Eloren1 commented Feb 8, 2026

@daveallie yes please, so that the new Embedded Style rolls out in the final 1.0.0 without bugs from the past

@daveallie daveallie merged commit 9b04c2e into crosspoint-reader:master Feb 8, 2026
5 checks passed
@Eloren1
Copy link
Contributor

Eloren1 commented Feb 8, 2026

🔥🔥

daveallie pushed a commit that referenced this pull request Feb 8, 2026
@jdk2pq @daveallie
feat: Add percentage support to CSS properties (#738)
9e04eec 
## Summary
- Closes #730

**What is the goal of this PR?**
- Adds percentage-based value support to CSS properties that accept
percentages (padding, margin, text-indent)
 
**What changes are included?**
- Adds `Percent` as another CSS unit
- Passes the viewport width to `fromCssStyle` so that we can resolve
percentage-based values
- Adds a fallback of using an emspace for text-indent if we have an
unresolvable value for whatever reason

## Additional Context

- This was missed in my CSS support feature, and the fallback when we
encounter a percentage value is to use px instead. This means 5% (which
would be ~30px on the screen) turns into 5px. When percentages are used
in `text-indent`, this fallback behavior makes the indent look like a
single space character. Whoops! 😬

My test EPUB has been updated
[here](https://github.com/jdk2pq/css-test-epub) with percentage based
CSS values at the end of the book.

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**YES**_, Claude Code
jdk2pq added a commit to jdk2pq/crosspoint-reader that referenced this pull request Feb 9, 2026
@jdk2pq
Merge branch 'master' into fix/account-for-nbsp-character-as-non-brea…
77949e1 
…king-space

* master:
  feat: Add percentage support to CSS properties (crosspoint-reader#738)
  Use GITHUB_REF_NAME over GITHUB_HEAD_REF in release candidate workflow
  Add release candidate workflow
  fix: Allow OTA update from RC build to full release (crosspoint-reader#778)
  fix(ui): Add Back label in KOReader Sync screen (crosspoint-reader#770)
  fix: Add EPUB 3 cover image detection (crosspoint-reader#760)
  feat: A web editor for settings (crosspoint-reader#667)
  feat: add HalStorage (crosspoint-reader#656)
  perf: optimize drawPixel() (crosspoint-reader#748)
  feat: wakeup target detection (crosspoint-reader#731)
  fix: Scrolling page items calculation (crosspoint-reader#716)
  refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspoint-reader#746)
  feat: optimize fillRectDither (crosspoint-reader#737)
Marma92 pushed a commit to Marma92/crosspoint-reader that referenced this pull request Feb 10, 2026
@jdk2pq @Marma92
feat: Add percentage support to CSS properties (crosspoint-reader#738)
5c635ec 
## Summary
- Closes crosspoint-reader#730

**What is the goal of this PR?**
- Adds percentage-based value support to CSS properties that accept
percentages (padding, margin, text-indent)
 
**What changes are included?**
- Adds `Percent` as another CSS unit
- Passes the viewport width to `fromCssStyle` so that we can resolve
percentage-based values
- Adds a fallback of using an emspace for text-indent if we have an
unresolvable value for whatever reason

## Additional Context

- This was missed in my CSS support feature, and the fallback when we
encounter a percentage value is to use px instead. This means 5% (which
would be ~30px on the screen) turns into 5px. When percentages are used
in `text-indent`, this fallback behavior makes the indent look like a
single space character. Whoops! 😬

My test EPUB has been updated
[here](https://github.com/jdk2pq/css-test-epub) with percentage based
CSS values at the end of the book.

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**YES**_, Claude Code
Marma92 pushed a commit to Marma92/crosspoint-reader that referenced this pull request Feb 10, 2026
@jdk2pq @Marma92
feat: Add percentage support to CSS properties (crosspoint-reader#738)
af3e5d1 
## Summary
- Closes crosspoint-reader#730

**What is the goal of this PR?**
- Adds percentage-based value support to CSS properties that accept
percentages (padding, margin, text-indent)
 
**What changes are included?**
- Adds `Percent` as another CSS unit
- Passes the viewport width to `fromCssStyle` so that we can resolve
percentage-based values
- Adds a fallback of using an emspace for text-indent if we have an
unresolvable value for whatever reason

## Additional Context

- This was missed in my CSS support feature, and the fallback when we
encounter a percentage value is to use px instead. This means 5% (which
would be ~30px on the screen) turns into 5px. When percentages are used
in `text-indent`, this fallback behavior makes the indent look like a
single space character. Whoops! 😬

My test EPUB has been updated
[here](https://github.com/jdk2pq/css-test-epub) with percentage based
CSS values at the end of the book.

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**YES**_, Claude Code
jdk2pq added a commit to jdk2pq/crosspoint-reader that referenced this pull request Feb 11, 2026
@jdk2pq
Merge branch 'master' into fix/account-for-nbsp-character-as-non-brea…
9d0e7a9 
…king-space

* master:
  feat: use natural sort in file browser (crosspoint-reader#722)
  fix: issue if book href are absolute url and not relative to server (crosspoint-reader#741)
  feat: unify navigation handling with system-wide continuous navigation (crosspoint-reader#600)
  feat: Add Italian hyphenation support (crosspoint-reader#584)
  feat: Add percentage support to CSS properties (crosspoint-reader#738)
  Use GITHUB_REF_NAME over GITHUB_HEAD_REF in release candidate workflow
  Move release candidate workflow to manual dispatch
  fix: Allow OTA update from RC build to full release (crosspoint-reader#778)
  refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspoint-reader#746)
  perf: optimize drawPixel() (crosspoint-reader#748)
  feat: wakeup target detection (crosspoint-reader#731)
  fix: Scrolling page items calculation (crosspoint-reader#716)
  feat: optimize fillRectDither (crosspoint-reader#737)
  fix: increase lyra sideButtonHintsWidth to 30 (crosspoint-reader#727)
  fix: Remove separations after style changes (crosspoint-reader#720)
  fix: Lag before displaying covers on home screen (crosspoint-reader#721)
  feat: Add Settings for toggling CSS on or off (crosspoint-reader#717)
  Use GITHUB_HEAD_REF
  release: 1.0.0
jdk2pq added a commit to jdk2pq/crosspoint-reader that referenced this pull request Feb 13, 2026
@jdk2pq
Merge branch 'master' into perf/improve-large-css-file-handling
50e024b 
* master: (25 commits)
  fix: Reduce MIN_SIZE_FOR_POPUP to 10KB (crosspoint-reader#809)
  docs: Update USER_GUIDE.md (crosspoint-reader#817)
  fix: Prevent sleeping when in OPDS browser / downloading books (crosspoint-reader#818)
  feat: Extend python debugging monitor functionality (keyword filter / suppress) (crosspoint-reader#810)
  docs: Update USER_GUIDE.md (crosspoint-reader#808)
  feat: Connect to last wifi by default (crosspoint-reader#752)
  feat: use natural sort in file browser (crosspoint-reader#722)
  fix: issue if book href are absolute url and not relative to server (crosspoint-reader#741)
  feat: unify navigation handling with system-wide continuous navigation (crosspoint-reader#600)
  feat: Add Italian hyphenation support (crosspoint-reader#584)
  feat: Add percentage support to CSS properties (crosspoint-reader#738)
  Use GITHUB_REF_NAME over GITHUB_HEAD_REF in release candidate workflow
  Move release candidate workflow to manual dispatch
  fix: Allow OTA update from RC build to full release (crosspoint-reader#778)
  refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspoint-reader#746)
  perf: optimize drawPixel() (crosspoint-reader#748)
  feat: wakeup target detection (crosspoint-reader#731)
  fix: Scrolling page items calculation (crosspoint-reader#716)
  feat: optimize fillRectDither (crosspoint-reader#737)
  fix: increase lyra sideButtonHintsWidth to 30 (crosspoint-reader#727)
  ...
Unintendedsideeffects pushed a commit to Unintendedsideeffects/crosspoint-reader that referenced this pull request Feb 17, 2026
@jdk2pq
refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspo…
0c40bd2 
…int-reader#746)

## Summary

**What is the goal of this PR?**
- Just a simple rename after feedback in crosspoint-reader#738

**What changes are included?**
- Renamed "Embedded Style" to "Book's Embedded Style" to more clearly
associate it with "Book's Style" option in "Paragraph Alignment"
settings

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**NO**_
Unintendedsideeffects pushed a commit to Unintendedsideeffects/crosspoint-reader that referenced this pull request Feb 17, 2026
@jdk2pq
feat: Add percentage support to CSS properties (crosspoint-reader#738)
0562ca1 
## Summary
- Closes crosspoint-reader#730

**What is the goal of this PR?**
- Adds percentage-based value support to CSS properties that accept
percentages (padding, margin, text-indent)
 
**What changes are included?**
- Adds `Percent` as another CSS unit
- Passes the viewport width to `fromCssStyle` so that we can resolve
percentage-based values
- Adds a fallback of using an emspace for text-indent if we have an
unresolvable value for whatever reason

## Additional Context

- This was missed in my CSS support feature, and the fallback when we
encounter a percentage value is to use px instead. This means 5% (which
would be ~30px on the screen) turns into 5px. When percentages are used
in `text-indent`, this fallback behavior makes the indent look like a
single space character. Whoops! 😬

My test EPUB has been updated
[here](https://github.com/jdk2pq/css-test-epub) with percentage based
CSS values at the end of the book.

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**YES**_, Claude Code
Unintendedsideeffects pushed a commit to Unintendedsideeffects/crosspoint-reader that referenced this pull request Feb 17, 2026
@jdk2pq @daveallie
refactor: Rename "Embedded Style" to "Book's Embedded Style" (crosspo…
fafb712 
…int-reader#746)

## Summary

**What is the goal of this PR?**
- Just a simple rename after feedback in crosspoint-reader#738

**What changes are included?**
- Renamed "Embedded Style" to "Book's Embedded Style" to more clearly
associate it with "Book's Style" option in "Paragraph Alignment"
settings

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**NO**_
Unintendedsideeffects pushed a commit to Unintendedsideeffects/crosspoint-reader that referenced this pull request Feb 17, 2026
@jdk2pq @daveallie
feat: Add percentage support to CSS properties (crosspoint-reader#738)
d966c4e 
## Summary
- Closes crosspoint-reader#730

**What is the goal of this PR?**
- Adds percentage-based value support to CSS properties that accept
percentages (padding, margin, text-indent)
 
**What changes are included?**
- Adds `Percent` as another CSS unit
- Passes the viewport width to `fromCssStyle` so that we can resolve
percentage-based values
- Adds a fallback of using an emspace for text-indent if we have an
unresolvable value for whatever reason

## Additional Context

- This was missed in my CSS support feature, and the fallback when we
encounter a percentage value is to use px instead. This means 5% (which
would be ~30px on the screen) turns into 5px. When percentages are used
in `text-indent`, this fallback behavior makes the indent look like a
single space character. Whoops! 😬

My test EPUB has been updated
[here](https://github.com/jdk2pq/css-test-epub) with percentage based
CSS values at the end of the book.

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**YES**_, Claude Code
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@osteotek osteotek osteotek approved these changes

@daveallie daveallie daveallie approved these changes

@lukestein lukestein lukestein approved these changes

+1 more reviewer

@Eloren1 Eloren1 Eloren1 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

reader Related to the core reader experience

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

bug: Paragraph tab indents are only 1 space long

5 participants

@jdk2pq @Eloren1 @osteotek @daveallie @lukestein