Skip to content

Fix CSS relative value in HTML export#7096

Merged
laurmaedje merged 4 commits intotypst:mainfrom
AzurIce:fix-html-css-rel-width
Oct 14, 2025
Merged

Fix CSS relative value in HTML export#7096
laurmaedje merged 4 commits intotypst:mainfrom
AzurIce:fix-html-css-rel-width

Conversation

@AzurIce
Copy link
Contributor

@AzurIce AzurIce commented Oct 10, 2025 •
edited
Loading

fix: #7095

typst/crates/typst-html/src/css.rs

Lines 41 to 49 in ddd8ae7

pub fn rel(rel: Rel) -> impl Display {
typst_utils::display(move |f| match (rel.abs.is_zero(), rel.rel.is_zero()) {
(false, false) => {
write!(f, "calc({}% + {})", rel.rel.get(), length(rel.abs))
}
(true, false) => write!(f, "{}%", rel.rel.get()),
(_, true) => write!(f, "{}", length(rel.abs)),
})
}

Since Ratio's get method returns value betweens 0.0 and 1.0, so the value should be timed by 100.0 here.

@AzurIce AzurIce mentioned this pull request Oct 10, 2025
Closed
1 task
laurmaedje
laurmaedje reviewed Oct 13, 2025
View reviewed changes
laurmaedje
laurmaedje reviewed Oct 13, 2025
View reviewed changes
Copy link
Member

@laurmaedje laurmaedje left a comment

Choose a reason for hiding this comment

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

Would also be great if could add a test

@AzurIce AzurIce force-pushed the fix-html-css-rel-width branch from 9ab1bee to d403822 Compare October 13, 2025 09:26
@AzurIce
Copy link
Contributor Author

AzurIce commented Oct 13, 2025 •
edited
Loading

Would also be great if could add a test

Added a --- image-sizing-html-css html --- test in visualize/image.typ which covers the usage of rel

@AzurIce AzurIce requested a review from laurmaedje October 13, 2025 10:07
@laurmaedje laurmaedje changed the title Fix html css relative value Fix CSS relative value in HTML export Oct 14, 2025
@laurmaedje laurmaedje added this pull request to the merge queue Oct 14, 2025
@laurmaedje
Copy link
Member

laurmaedje commented Oct 14, 2025

Thanks!

Merged via the queue into typst:main with commit f417f74 Oct 14, 2025
8 checks passed
laurmaedje pushed a commit that referenced this pull request Oct 16, 2025
@AzurIce @laurmaedje
Fix CSS relative value in HTML export (#7096)
3590cb3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@laurmaedje laurmaedje Awaiting requested review from laurmaedje

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Images has wrong css width percent when exported to html

2 participants

@AzurIce @laurmaedje