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
  • #50

Closed
Open
Opened Jul 03, 2018 by Julie Blanc@JulieBlanc
  • Report abuse
  • New issue
Report abuse New issue

Default values for Page-Margin Boxes (text-alignment)

CSS Paged Media Modules defines default values of text-alignment for Page-Margin Boxes as follows:

Capture_d_écran_2018-07-03_à_13.02.07

Source: https://www.w3.org/TR/css3-page/#margin-text-alignment


For the moment, there are not the default values in pagedjs

HTML: margin-boxes-default-text-alignment.html

Result: margin-boxes-default-text-alignment-wrong.pdf

The result we should get: margin-boxes-default-text-alignment-correct.pdf


They can be implemented in pagedjs as follows:

.pagedjs_margin-content{ width: 100%; }

.pagedjs_page .pagedjs_margin-top-left > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-top-right-corner > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-bottom-left > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-bottom-right-corner > .pagedjs_margin-content { text-align: left; }

.pagedjs_page .pagedjs_margin-top-left-corner > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-top-right > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-bottom-left-corner > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-bottom-right > .pagedjs_margin-content { text-align: right; }

.pagedjs_page .pagedjs_margin-top-center > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-bottom-center > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-left-top > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-left-middle > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-left-bottom > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-right-top > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-right-middle > .pagedjs_margin-content,
.pagedjs_page .pagedjs_margin-right-bottom > .pagedjs_margin-content { text-align: center; }

.pagedjs_margin-top > div { align-items: center!important; }
.pagedjs_margin-bottom > div { align-items: center!important; }

.pagedjs_margin-left-top,
.pagedjs_margin-right-top { align-items: flex-start!important; }

.pagedjs_margin-left-middle,
.pagedjs_margin-right-middle { align-items: center!important; }

.pagedjs_margin-left-bottom,
.pagedjs_margin-right-bottom { align-items: flex-end!important; }

HTML working: margin-boxes-default-text-alignment-working.html

Note: for the implementation, issue #48 (adding .pagedjs_margin-content{ width: 100%; }) must be resolved

Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
1
Labels
margin boxes
Assign labels
  • View project labels
Reference: tools/pagedjs#50