Firefox

src/css/layout.scss

@@ -2,7 +2,7 @@
   height: 100%;
 }
 
-.layout {
+.full-layout {
   display: flex;
   flex-direction: column;
   height: 100%;

src/css/styles_de_paragraphes.scss

@@ -160,9 +160,12 @@
 
 .justify p {
 	text-align: justify;
+	hyphens: auto;
+	text-justify: inter-character;
 	text-align-last: left !important;
 	hyphens: auto;
 	hanging-punctuation: first;
+
 }
 
 .section-content p {

src/pages/Index.vue

@@ -48,7 +48,7 @@
     </div>
   </div>
   <!-- Chapitres -->
-  <div  v-for="(edge,index) in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
+  <div v-for="(edge,index) in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
     <div class="blank-page no-folio breakBeforeLeft" />
     <div v-if="edge.node.Rubrique">
       <div class="section-title">
@@ -145,25 +145,13 @@ export default {
 
       this.$nextTick(function() {
         Promise.all(allPromises).then(() => {
-
-
-
-          let hyphenopoly = document.createElement('script'),
-            hyph = document.createElement('script');
-          hyphenopoly.setAttribute('src', 'lib/Hyphenopoly-master/Hyphenopoly_Loader.js')
-          hyph.setAttribute('src', 'lib/hyph.js')
-          document.head.appendChild(hyph)
-          document.head.appendChild(hyphenopoly)
-          hyph.onload = () => {
-            Hyphenopoly.handleEvent = {
-              hyphenopolyEnd: (e) => {
-                let previewer = new Previewer();
-                previewer.preview();
-              }
-            };
-
-          };
-
+          let previewer = new Previewer();
+          previewer.preview().then((flow)=>{
+            let layouts = Array.from(document.querySelectorAll(".layout"));
+            layouts.forEach(l=>{
+              l.classList.add("full-layout");
+            });
+          });
         });
       });