LibreOffice Conference 2026: Transforming LibreOffice Guides into Web Pages for Bookshelf

Duration: 17:06 1776 transcript words EN summary

Video summary

The presentation focuses on transforming LibreOffice documents into web pages for the Bookshelf project, highlighting significant differences between traditional print formats like PDF and ODF books versus scrolling web interfaces. A critical step in this process involves creating a clean copy of the original documents because modifications made during the conversion cannot be reverted to the source chapters. Before exporting, authors must ensure their chapters are properly sanitized with correct styles, sections, and formatting. The workflow then shifts from a page-based structure to a scrolling one, which necessitates specific adjustments such as moving image captions from below to above the images to improve user navigation and comfort on digital screens. To facilitate this transition, a custom macro extension named "Chapter 2 HTML" is utilized to automate several key structural changes within the document. This tool removes the original table of contents and relocates it to a new section at the bottom of the chapter, while also repositioning captions above their corresponding images for better accessibility. Additionally, the macro allows authors to customize heading colors—such as using blue for Writer documents or green for Calc—to break ties with existing templates and ensure the final output is self-contained. These cosmetic and structural tweaks are essential because the web environment does not support page numbers in the same way books do, requiring references like "Figure 23 on page 23" to be converted into clickable links that navigate directly to the content above or below. The conversion process also involves rigorous checking and updating of internal references to ensure a seamless user experience. The macro scans for errors, updates object references to include larger clickable areas to prevent missed links, and replaces text indicating specific page numbers with navigational links labeled "above" and "below." Authors can manually review these changes, choosing to delete page number mentions entirely or adjust them as needed before the final export. Once these internal adjustments are complete and verified, the document is exported using a dedicated extension that generates a single HTML file containing all text and images organized into a specific folder structure. Finally, the generated HTML file is opened in a web browser where it may initially appear with elements in suboptimal positions due to the lack of custom styling. To resolve this, a specific macro is run to inject CSS code that repositions images, captions, and other elements to their intended locations within the browser window. This step ensures that the final web page looks polished and functions correctly as a scrolling document rather than a static file. The result is a fully functional web version of the book that leverages the interactive capabilities of the web while maintaining the integrity and content of the original LibreOffice documents.

Read the full video transcript

[music] with more details of the presentation I gave a couple of uh a couple of hours ago. Okay. So, uh the web display uh is different than PDF and ODF book. Uh uh in the book you leave pages and in the web page you scroll. Okay. So this is a different approach. Yes. And um we had some objects need to be modified and the sections will be rearranged like I showed in the other presentation and also beyond this point the process is downstream which means all the modifications that we do in the chapters are not going back to the chapters. have to have a copy of the documents in order to proceed for the operation of transforming the the files. Okay. So uh that was a question that was raised quite a lot of time because uh people thought oh you you're changing the the the files and this is uh uh what what why do you change the files? So the the the the most important thing that we need here is to have the chapters correctly sanitized. I show in the yesterday how to clean the chapters so that we have everything with the right styles with the right sections with the right objects and the right formatting and then after that we do this process. So what we are going to do is to add add extra sections the sections that will help me to navigate within the web pages. Uh I will also move captions. I will explain how. Okay. Why is it so? Because the captions in a book are below the images and it's better for web pages that the caption be on top of the images. Okay? Because the process is a scrolling process. Uh we get some uh we change the heading colors just for fun. It's not necessary. So we keep blue for writer. We green for calc uh [clears throat] yellow for draw and things like that. But this is just cosmetic. Okay. And uh when we change the heading colors, we also break the templates so that the the the files will not have uh the uh template anymore. Okay. Also we change some reference we have in the text for example figure 23. 23 is a field figure is text and we change to the the the same field but with a different presentation. And also many uh authors like to see to put a figure 23 on pageuh 23 or and we change for above and below because there is no more pages. Okay, it's a like as Vantes said to me, this is a toilet paper, you know, it's something that scrolls. Okay. And then we export to HTML. Yeah. Right. So, how do I uh Yes. So, I explained that in the past uh early. So, the these are the extra sections that I'm going to add to the chapter and then after that we will export. So let me just um uh show to you how I do it. Let's open a file here. [snorts] Uh let's take this one for example. But this is not the case. So together with Bernardo Antonio he created another set of uh macros uh which we will use here. So let me just increase that. Uh this new uh this other extension is named chapter 2 HTML. Okay, it's on the menu here and it has several operations that I'm going to process inside the the chapter. Okay, so the first one here is to add sections. So it's going to add sections. And how is going to do? It's do it will do the following. It will uh remove the table of contents. Okay. and put the table of contents into another section below. So, let's see if it was here if that's okay. So, oops. Nope. Uh add sections. Just a moment here. Small detail of implementation. Alt enter. And let's go. Oops. [snorts] Add section. So, uh it's the table of content has been deleted. He added all these sections to the um u file. And you will see okay that the table of contents now is on the bottom of the the the the chapter. Okay, it's now on the bottom. [clears throat] And wi with that I'm going to reposition the table of contents in in another uh position in the web page. Okay, the second thing is to move the caption. Uh let's let's put this uh show here. Okay, let's show in this situation here. For example, you have this image here. The caption is below and I want the caption on the top of the image. So, we run this uh move captions and he puts uh it puts right now the captions on the top of the image. Okay. So when you click uh in in a link that brings to this image, it will bring you on the top of the image and not on the bottom. So it's a it's a a nice feature. I mean it's help us to be more comfortable. Now I can just change the heading colors. So the heading colors is hardcoded uh in the temp in the the macro. It's going to change this to another color a color of ink impress. Uh and by from now on from now on it is [snorts] it it breaks the link with the templates and everything that you are going to change is now only on the file not on the template anymore. So it uh has changed and uh the color of the headings are not a bit different. This is a sort of a dark yellow which is the color of impress. Okay. Uh that's it. And [snorts] the last thing is to check all the links. So the cross references. Okay. Again this is a a set of uh operations. First of all it will check the errors. Then it will check the objects references and it will check also and remove the uh string on page. When it says look at section at heading three on page 25, we remove the page 25 and we put above and below. So this allow you to click and to navigate into the page. So for errors probably there is no error here. [clears throat] It says no errors. Okay. The object number. So it will change the references. It would change the reference here figure three to something like let me see 38 cross reference where change imagine doing 38 times the change uh that's not not funny so now you have you know the figure one figure two uh why I do so because uh you have more space to click on. Okay? Otherwise, you have to click only on the number and if you are not very uh uh good at the mouse, then you you may just missed the the link. Okay. Uh so 38 38 figures have been reference has been changed. [snorts] Okay. And finally the last one of the cross reference is to change the expression on page to a link above and below. So here it will traverse the the file. Uh okay. So, I think everything was all right and there was no Okay, here is something that's not working. Let me just check again. Okay, here here we are. He says that um the reference found is on page 26. So, it's here. Okay, it's here. And uh you have three options. you delete it so you don't uh mention the page or you can change above and below or you just leave it as it is and you skip this change. Okay, so I'm going to change it on [panting and sighs] here uh to show you. Oh, he's going to uh it's going to make it uh uh all the time. So let's change it. Uh now for example on figure we have decided not to um put uh a page number. So we just uh delete [snorts] here. Okay. Uh here I'm going to change. Hope there is not that much figure. I skip. No skip. No I delete. Okay. Uh here I delete as well. A bit of patience. [snorts] Figure I delete. I could make it automatic but uh navigator is not. Then I change it. Okay. Figure I delete. That's okay. So here for example I have deleted the expression that was here a homepage and the links are now for example let me show you the links oh something was missing here but let's see again [snorts] oops let me see if uh to show you how it work it. Oh, okay. See navigator below. So, both of the same fields brings you to the right uh position. Okay. So, that's it and that's uh what uh we we do. Then we are ready now to export to HTML. So as I said before in the other presentation, we use a specific extension that is available on the extension website and it export right to HTML. We are going to use it here. It's also included into the ex the the macro. So here we have the HTML export. Okay. [snorts] and uh uh some information and then let's go uh it's yes it stores that's that's okay to store here so exporting uh in that case all the the HTML will be a big file and all the images will be in a folder inside the same the same uh folder where we are Okay. Now, if uh it ask me to open it. So, here we go. It's going to open my browser. [snorts] [sighs] And here is the result. So, you will see okay, this is not good because I have uh several things that are in the the bad position. This is not what I want. But all the section are here. Now I will introduce the CSS to reposition on the right um uh the right uh place in the real state of the browser. Right? So I have to run a specific macro. Let me uh show you here. Uh [snorts] [clears throat] let me just uh um where I am comment okay let me just maybe we have to navigate here it's better a bit of patience please [snorts] so that I get uh in the right uh position Yeah. So, here we are. We have the images, you know. [snorts] >> [sighs] >> I can do better. It's to here and Uh yes, just a minute. A moment Yeah. So here I need to take some of