Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • Support
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
pagedjs
pagedjs
  • Project
    • Project
    • Details
    • Activity
    • Releases
    • Cycle Analytics
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Charts
  • Issues 160
    • Issues 160
    • List
    • Boards
    • Labels
    • Milestones
  • Merge Requests 12
    • Merge Requests 12
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
    • Charts
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Tools
  • pagedjspagedjs
  • Issues
  • #233

Closed
Open
Opened Jul 15, 2020 by Gabriel Rumbaut@grumbaut
  • Report abuse
  • New issue
Report abuse New issue

Copy CSS to Repositioned Element

I'm currently exploring using Pagedjs for an ebook-to-print workflow at my company. We work on a lot of textbooks, and one of our main requirements is the ability to position definitions in smaller columns to the left or right of the main text. I have a custom module I'm adding with Paged.registerHandlers() that does this quite well:

Screen_Shot_2020-07-15_at_2.02.24_PM

One issue I'm running into, though, is copying styles to the repositioned element. One other requirement we have is the ability to keep the CSS cascade from the digital ebook, so that we can keep the CSS as is as much as possible. I was hoping to copy the styles before Pagedjs parses the content using window.getComputedStyle in the beforeParsed hook, but all of the styles returned by getComputedStyle are empty. Here is how I'm trying to copy the styles:

export const copyCssRules = (el, newNode) => {
	const styles = window.getComputedStyle(el);
	Object.keys(styles).forEach((key) => newNode.style.setProperty(
		key,
		styles.getPropertyValue(key),
		styles.getPropertyPriority(key),
	));
};

This is being called in the beforeParsed hook of the handler that positions the definitions. Essentially, my hope is to be able to take any CSS properties with a selector of (for example) .glossary .definition and apply it directly to the repositioned element. The selector for the repositioned element would be (for example) .column .definition, so any CSS with a selector of .glossary .definition wouldn't apply.

Is there a way to copy styles over to elements that have been repositioned, or is there an expected best practice for this with Pagedjs?

Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
0
Labels
None
Assign labels
  • View project labels
Reference: tools/pagedjs#233