Anonymous
Not logged in
Talk
Contributions
Create account
Log in
Publication Station
Search
Editing
Research/all-in-one publishing
(section)
From Publication Station
Namespaces
Page
Discussion
More
More
Page actions
Read
Edit
History
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
=== Creating the CSS === This was by far the most challenging part of this project, so we will discuss the challenges separately for every output format. ==== Web CSS ==== For the website, the whole design of the book had to be reimagined. Pages do not exist, information doesn't have to be linear and many interactive posibilities open up. We decided to keep the website largely linear because it seemed to fit the content well. Some interactivity was added: the index was redesigned to become a navigation menu and the footnotes were made into toolips. Because the font (Metric) was not licensed for online use, we had to find a font that was similar. This proved to be very difficult, so we had to compromise. We tried to avoid using javascript when possible, as this can decrease compatibility and increase the complexity of the code. The only exception we made was for the footnotes, because this was simply not possible in CSS. Numbering of figures, pages and tables was also done in CSS. This turned out to work out quite well, although browser support is somewhat limited. At a later stage we realized that this may not have been the optimal solution, since this numbering is vital information and not just a matter of styling. ==== Responsive web CSS ==== Instead of creating a separate mobile output, we made the regular website responsive to screen size. The challenges we encountered while doing this were not much different from the challenges that come with all mobile websites. Even though these challenges also belong to our research topic, they do not represent the most innovative aspects of it. For this reason, documentation regarding this output seems redundant to us. ==== Epub CSS ==== Epub stylesheets proved to be very badly documented. Every device has its own interpretation of CSS, and almost all of them are quite limited. Advanced CSS like numbering works on almost none of the available devices. We used Pandoc to create the epub, and one limitation was that pandoc can only add one stylesheet. We divided the stylesheet files into a global stylesheet, a print stylesheet and a specific epub stylesheet, all of which should be used for the epub. To solve this, we used a command line utility to merge these stylesheets and save them as one, so that we could use the resulting css for Pandoc. This resulted in the following command for windows: <source lang="winbatch"> type "css\style.css" "css\epub.css" "css\print.css" > "css\epub_composite.css" pandoc container.html -o book.epub --epub-cover-image=img\cover.jpg --epub-stylesheet=css\epub_composite.css </source> ==== Print CSS ==== Because one of our team member had good experiences in the past with Chrome's print functionality, this was the browser we used for testing. This turned out to be a mistake, because lately Chrome's printing functionality has deteriorated (possibly caused by their change of rendering engine). Many hours were wasted on trying to get the design to work on Chrome, after which we decided to focus on firefox. This proved to be much easier, and most CSS worked correctly. ==== Prince CSS ==== None of the team members had used PrinceXML before, so the process was pretty much 'trial and error' in the begining. There were issues with the CSS files being used for the web version. They had to be imported in the CSS file used for Prince (even though they were being requested in the HTML head). [[File:Prince01.png | 390px]]<br> The HTML head, where the CSS files are requested). <br><br> [[File:Prince02.png]]<br> The import command in prince.css (seems redundant but is actually necessary). <br><br> Prince has some useful features, such as retrieving content from HTML elements and assigning them to variables (useful if you need to use a Chapter's title in the page footer, for example). One possible downside is that Prince XML is proprietary software. To use Prince, a command like the one below is needed: <source lang="bash"> prince container.html -s css/prince.css book.pdf </source> Documentation on how to use and install PrinceXML can be found here: http://www.princexml.com/doc/ ==== Weasyprint CSS ==== Weasyprint works similarly to PrinceXML. However, it is not proprietary software. It is trickyer to install when compared to Prince and does not have all the features that we found in PrinceXML. <source lang="bash"> weasyprint container.html -s css/weasyprint.css weasybook_final.pdf </source> Documentation: * how to install http://weasyprint.org/docs/install/#by-platform * command-line API http://weasyprint.org/docs/api/#command-line-api
Summary:
Please note that all contributions to Publication Station are considered to be released under the Creative Commons Attribution-NonCommercial-ShareAlike (see
Publication Station:Copyrights
for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource.
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)
Navigation
Main navigation
Main page
Printmaking Studio
Print Studio
Dig. Publishing Studio
Namespaces
Grafiwiki
Random Page
Log in
Wiki tools
Wiki tools
Page tools
Page tools
User page tools
More
What links here
Related changes
Page information
Page logs