 Hello everybody, this is the opportunity I have to present the project that I was carrying together with the documentation group, which is to have the user guides migrated to web pages and to create a sort of a library office bookshelf that Timothy just mentioned quickly before. And that's it, yes. So essentially, who am I? I'm Olivier Alot. I am the document coordinator inside the Document Foundation. I have been involved with LibreOffice since the very beginning, 2010 and even before, because I joined OpenOffice.org. And yes, I live in Brazil, in Rio de Janeiro, and it's an opportunity for work with this nice software. What is the proposal is for us to talk about the LibreOffice Guide, which is a collection of several books. The need of an online reading of this kind of bookshelf, the issues that I have faced in transforming the ODT files and chapters into what I call a web output, not a file migration, and explain what that is much more than pure file export. How do I achieve the web display of the guides and how to get these outputs and the resulting of these outputs? So essentially, the LibreOffice guides that we have are through assets. I mean, it's very high quality information. There is a lot of savvy tricks for the users. There is the do's and don'ts of handling office documents. It's available in PDF and ODT format. It's also available as a printed book. We have a team upstream of about 10 people working actively to update and upgrade the guides. The idea is to have one person that coordinates one of the guides. So we have someone that coordinates the calc guide, another one coordinates the writer guide, the impress guide and such and such and such. And the community works on the chapters, picks the changes, review the contents, sometimes update the images and the steps to execute the given task. And like I said, it's a true asset of the community because a software that has no documentation in my point of view is a lesser software. So if you are going to implement or you want to use a software as complex as an office suite, then you need absolutely to have the right documentation. So I think that we can do more. I think that we can have not only this PDF and ODT format but also the online reading. I call that the online reading a way to display in your browser. So we want to have these guides in HTML format for easy access from the browser, your point to a given page and then you get your information. Something that is quick to search in the page and also perhaps in the web. And also to be able to display in several form factors, the desktop, tablets, eventually your mobile, when you are eventually commuting in your subway, you may want to have a read on a given task on pivot tables in the calc guide. For example, it's up to you. And we also think that the online reading is a companion product for migration projects. Clearly, I have been involved into a very large migration project and I can tell you that you just don't throw the software on the table on the desktop of the user. You absolutely need to give him and her information on how to use the software because it's absolutely not trivial to change the way people are working. And we know that beside the fact that LibreOffice and the competition produce the same results, the way to achieve the results are different. And this has to be documented and documented in this case is absolutely fundamental. The LibreOffice bookshelf idea is an idea to collect all the user guides into a given online web pages, use the browser to display the web pages, update the online with the newest guides, preserve the content of the guides, and be able to deploy and incorporate internet, government offices, school, colleges, libraries, whatever you want. You get these sets of guides quickly and easily deployable. Very good. So what happens is that transforming the ODT files into HTML is not straightforward. The ODT and PDF are good formats for books with pages to live through. So you just leave the pages page one, page 20, et cetera. But it's not that good for browsers. So browsers don't have the concept of page. The reading is through a continuous scrolling. You know that because if you read the text in your tablet, you probably will have to scroll. And there is an underexploitation of the modern browser's web resources. So navigation, hyperlink, search, things that can show in a different way, that turns out the reading experience better in this technology, in modern technology than currently the old-fashioned books and guides, on paper. So changing the formats from ODT to HTML is the least of the problem. That's the easiest part. The real problem is refactoring the pagination. So change the way the information is displayed on your browser. So what we have to give an example is that this is the sequence of important parts that we have inside a chapter of our actual user guides. We have on the top, on the very top, you have the logo, then follow it by the guide name, then the chapter title and subtitle, then we have a section on copyrights, the table of contents of the chapters and the contents then of the chapter itself. So this has to be changed and we have to execute a change. So I'm showing here a typical chapter of the LibreOffice Guide. We have here the logo on the top, then it is followed by the guide name and then the title, then we have the copyright, then we have the table of contents and finally we have what I call the display area, but it's actually the real content of the chapter. So what I have to do is we have to transform this sequence of parts of your documents into something that is better for the browser. So we have to shift and shuffle all these sections into others display. So we have, for example, the logo goes to the top left, the guide name to the top middle left, the chapter title and subtitle on the top right part. The table of contents of the chapter is on the left. The copyright and the contents display area are put together in the middle of the reading part. Then we can also improve a little bit more. We added a couple of other sections in the web display. For the foundation we have a donation button. We can introduce the book table of contents to be able to let us jump between chapters. We put a search mechanism to find the terms inside the book. This imprint is the legal imprint that we use for the document foundation and we have a spare section here that is not used on the moment, but we can, of course, introduce other links interesting. For example, download the PDF and such and such. This is the display that we are using at the moment. Let's see how it shows. This is the layout at the moment. You recognize here the table of contents on the left. We have the logo, the guide name, the chapter name, the button for a donation. This is the book table of contents, the search section and the imprint and this empty so far area that we live for further developments. This is the layout that we are achieving. Everything is scrollable. You can read it and this is what we have so far for most of the books that we have available. The road to this output has a strategy. The golden rule that we are following is that the contents must not be changed since the publication of the guide. Even if we get a typo, we may or may not fix the typo. We just don't want to go through the content of the book. We want to have a faithful copy of the publication. Of course, there is a lot of manual work, but we search for an automatic export with minimal manual interference, which is not always possible because there is a lot of corner case. A text document is rather difficult to handle with the scripts inside library office. Whoever has already tried to detect or change something inside the text document knows the large amount of lines of code that you need to write in order to just position the cursor on the text that you want to change. It's rather complicated. This is a consequence by the fact that the library office as a word processor is a flexible tool for text editing and it allows a lot of freedom. You can have several ways to get the same outputs. For example, you have direct formatting, manual object position, numbering styles, misuse, and this, for example, is one of the things I find. The list that we use, list one, the list style named list one, is very often mimicked by having the list, the paragraph style body text with the bullets. Of course, when you look at the PDF, the result is one. The oddity result is one, but when you put that into another HTML approach, then it messes completely. The difference between the two styles is going to show up very quickly. Part of the work is to carry some of the change in ODT on the library office. Some of the things that we can do can be done inside the library office, for example, clean up our list, clean up the direct formatting, and the second part, we have to do it in HTML. It's not possible to have the two in one step. It has to be in two steps. The pure export to HTML is not enough because, like I said, we need to introduce things. We can export to HTML, but I decided to use this extension named writer to latex or writer to HTML that creates a more leaner and more manageable web output. We have the extension. The extension is public. I'm going to talk about a little bit more. The first step on the cleanup of the ODT is to eliminate all the direct formatting. This is a best practice that all the authors and the translators are already aware that we cannot use direct formatting. Direct formatting is not good for document maintenance. Clean up a fake list, like I said. The body text and bullets is the same as the list one, visually identical, but internally this is completely different. The image anchoring has to change to place the images as character, which also has been done. Sometimes the removal of unofficial styles that are not part of the chapter templates. Some of these styles were either introduced by some spurious copy and paste that you bring from another source, or often we have also what I call the legacy styles that were developed for the open office times because the chapters and the books came from the open office times. Sometimes you see spurious styles floating around and it's time to clean up all these things. The step two is to do now changes on the ODF file. These changes have to be downstream. It cannot be put upstream because it's going to change the format and the layout of the document, so it's not possible to do this upstream. For example, in terms of, one of the examples is to swap the image caption. Image caption for a book is very well accepted to be below the image, but on browsers it's better to put on top of images because of the scrolling direction. Change the cross-reference. For example, if we have a figure 10, where 10 is the field, we change to figure 10 using a numbering n category, so we have more space to click on the link. We have to change some of the writings when we have a reference of an image. On page 23, there is no paging in terms of browsers, so we change that to instead of on page 23, we put above or below. This is one of the approaches. Also, we have to change the chapter templates. We crafted some different styles with the same name, exactly the same name, but different layouts. These new templates handle the mismatch between ODT richness and the HTML limitations. ODT is much richer in terms of resources than HTML, so we have to some form of restrict all this richness. For example, note tips and warning are not very well handled in HTML because they have graphic bullets. This is bad for the export. The tap character is not very well understood inside HTML. It doesn't make much sense for them. Sometimes we do reformatting of the paragraph styles for the title, guide name, and heading. These activities are very necessary. We export to HTML. You can use the export of HTML inside LibreOffice, but you get a dense and cluttered markup, and you have to then do the post processing to fix that. Or you have used this writer to HTML extension, which is available in the extension website of LibreOffice. It gives you a cleaner export and some interesting settings that we decided not to use. We just tried to use all the formatting generated inside the ODT file. The problem is that this extension seems not to be maintained anymore, but so far no problems. The post processing is needed, so the export of HTML does not handle modern web techniques. For example, we wanted to introduce the CSS grid, some techniques used for responsiveness of the formats, to handle better the navigation, so hyperlink, scrolling, and things like that. We had to add just one JavaScript entry on the output and one CSS entry to the output. Then we work on the CSS and the JavaScript to reposition all the sections, as we explained before. This post processing is handled by a script. It takes less than a fraction of a second and it reposition everything for you. The results is that we have all the sections displayed. For example, the support LibreOffice, this book table of contents is handled on the JavaScript. The layout here is a grid that is handled by the CSS. You may recognize that we tried to preserve most of the formats of the chapter. The bookshelf is available right now. You can look at the website books.libreoffice.org. It's a very simple HTML static. There is absolutely no server side script. It's only JavaScript, CSS, and HTML. You can clone in your premises. If you want to install in your internet, just clone this URL and everything is going to be available. Just point your website inside the root of this folder. Then everything is going to be available for you. You can install it in your school, your company, your library, your college, your home. The idea is to make it available as much as possible for everybody. This is the bookshelf. You see that we have already transformed quite a lot of these guides. Everything is, like I said, static. You can, of course, develop for English and Portuguese. What we have is if you click on one of the guides and then you have this layout and you can just click here to download ODF or download via printed copy or download PDF or read online if you want. Then you see the pages that we have displayed. Special thanks to Tulio Macedo for the CSS grid. Tulio works in Brasilia, the capital of Brazil. He is skilled in terms of web design and intranets for the government that he works for. He has given us quite a lot of nice work on this grid. This is the idea. We have now five minutes. I would like to thank you for taking your time to watch this presentation. Like I said, my interest and I think it's important, my vision, may I say, is that we should have as much as possible a documentation and library office available for the people and for any kind of format, PDF, ODF, web. There is a lot of work to do. I have a vision that the web, what I call the web output is in an important aspect of library office that is underdeveloped, that can be eventually worked in the future. That's it. Thank you for your time. I'm ready for questions. Thank you. So one question in the chat. Are there different web page layout in case of form or tablets with checking? Okay, I am pasting on the Gigi chat. Yes, there are some which we use the technique on CSS for the grid. So if you modify the size of your browser or if you try to use in a tablet, you will see a different layout. Still, we have quite some work to do on that to perfect, but the idea is to make it the more automated possible without trying to avoid most of manual interference. So you can try if you access the bookshelf, you will see probably, let me just try to show you. This is the, I want to try to show my screen again. Yes. Okay, so you see the bookshelf here. If I redimension, then probably you will see that it's going to be reformatted and you can write and read online in different shapes. So take here and it's going to be displayed differently. Okay, so this is the grid that we use and this is what we try to make available for different formats. Hope I was able to answer you. Okay, sir. Thank you. Any other questions? Okay, my question. So you are a bookshelf site. How, I don't so reach that bookshelf site. So how now publishing or why not? Sorry, no. My question is also bookshelf site is now ready or not ready? It is available. It is work in progress. It is totally hosted inside the TDF and it is on Garrett. So if you want to, for example, if you want to add the Japanese book, you can go directly into Garrett and upload in Garrett your translation, your layouts and all the documentation you want. Okay. It's a very simple HTML. You clone it on your local machine and you do the changes and uploads and then you commit in Garrett and this is going to be available for everybody. And what I do is that the bookshelf I show to you is a copy of the Garrett part and so it's a separate copy but it's a mirror of the Garrett. So if you upload something right now, I will issue a command to copy the new things into the live website. So I'm eager, Shinji, to upload the Japanese books. I want to upload the Japanese books. Thank you. Okay, I will check. Okay. So I have a question, so paste? No, thank you. So please go checking the chat. Yes. Yes. Why is it? Well, it is redirected. Okay, I see. This perhaps because your browser is asking, it is something I need to see with the infrastructure people. Why is it directing to documentation? Maybe we need to break this redirection. So maybe putting a slash at the end could improve that. I can send you, I would look at this possibility to have these things working for you. Thank you. Thank you. Okay. So thank you very much and see you tomorrow on the next, yeah, thank you. Thank you for great presentation. Yeah. Bye bye. Bye.