Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow CSS Q unit as slide size definitions #400

Merged
merged 3 commits into from
Aug 30, 2024
Merged

Allow CSS Q unit as slide size definitions #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15c1cf8
Allow CSS `Q` unit as slide size definitions
yhatt Aug 30, 2024
077503a
[ci skip] Update CHANGELOG.md
yhatt Aug 30, 2024
b88c1b2
[ci skip] Update supported units described in theme CSS docs: Order u…
yhatt Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
### Added

- Support for CSS nesting (`cssNesting` constructor option) ([#397](https://github.com/marp-team/marpit/issues/397), [#399](https://github.com/marp-team/marpit/pull/399))
- Allow CSS `Q` unit as slide size definitions ([#400](https://github.com/marp-team/marpit/pull/400))

### Changed

Expand Down
2 changes: 1 addition & 1 deletion docs/theme-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ section {
}
```

!> Please notice _it must define **the static length in an absolute unit.**_ We support `cm`, `in`, `mm`, `pc`, `pt`, and `px`.
!> Please notice _it must define **the static length in an absolute unit.**_ We support `cm`, `in`, `mm`, `pc`, `pt`, `px`, and `Q`.

?> It is determined **one size per theme** in Marpit. The slide size cannot change through using [inline style](#tweak-style-through-markdown), [custom class](/directives#class), and [CSS custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). But the width of contents may shrink if user was using [split backgrounds](/image-syntax#split-backgrounds).

Expand Down
4 changes: 2 additions & 2 deletions src/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const absoluteUnits = {
pc: (v) => v * 16,
pt: (v) => (v * 4) / 3,
px: (v) => v,
// q: (v) => (v * 24) / 25.4,
q: (v) => (v * 24) / 25.4,
}

const convertToPixel = (value) => {
Expand All @@ -27,7 +27,7 @@ const convertToPixel = (value) => {
const parsed = Number.parseFloat(num)
if (Number.isNaN(parsed)) return undefined

const conv = absoluteUnits[unit]
const conv = absoluteUnits[unit.toLowerCase()]
return conv ? conv(parsed) : undefined
}

Expand Down
1 change: 1 addition & 0 deletions test/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ describe('Theme', () => {
expect(instance('635mm').widthPixel).toBe(2400)
expect(instance('8pc').widthPixel).toBe(128)
expect(instance('300pt').widthPixel).toBe(400)
expect(instance('635Q').widthPixel).toBe(600)
})

it('returns undefined when width has not absolute unit', () => {
Expand Down