Commit e04592aa authored by Julie Blanc's avatar Julie Blanc
Browse files

publish post 'avoid whitespaces'

parent 480aeb2a
---
title: "Float elements to avoid whitespaces on pages"
title: "Avoid whitespaces on pages"
date: 2020-09-21T11:58:02+02:00
draft: true
draft: false
type: post
url: posts/avoid-whitespaces/
class: "cookbook"
......@@ -24,7 +24,7 @@ The float properties can fix this problem, just by adding `float: top` and ` flo
![](whitespace-script.png)
However, we can't use it today. I personally encounter this problem in some book design I make. So, based on a script made by [Julien](https://gitlab.pagedmedia.org/julientaq) I develop a little script to make floating-like elements in paged.js to avoid large chunks of whitespace at the end of pages. For this, I used the possibility to add a custom module to Paged.js using [handlers and hooks](https://www.pagedjs.org/documentation/11-hooks/).
However, we can't use it today. I personally encounter this problem in some book design I make. So, based on a script made by [Julien](https://gitlab.pagedmedia.org/julientaq) I share with you a little script to make floating-like elements in paged.js to avoid large chunks of whitespace at the end of pages. For this, we add a custom module to Paged.js using [handlers and hooks](https://www.pagedjs.org/documentation/11-hooks/).
As you can see, the script is not very long. You just have to add it in your HTML document (after the paged.js script), add the class `elem-float-top` to the elements where you want it to apply, and watch the magic happen.
......@@ -65,7 +65,5 @@ Paged.registerHandlers(elemFloatTop);
**Note**: It's not exactly how the float page specifications work, but it's currently the easiest way to do it with Paged.js. A real `float: top` on an element should move the element to the top of the page where it is anchored. However, this would mean that the text already rendered in the page by paged.js (which is before the element) would have to be pushed to the next page, causing the text to be split again. There is currently no simple way in paged.js to re-render the page if an element in the layout is moved. For the moment, this script is the easiest way to do it.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment