Using Renditions in your project

When you create a project in PubCoder, the first thing you do is choosing a page size, an orientation (portrait/landscape) and a localization language, actually defining what we call the default rendition of your project.

Now, if you simply need one version of your publication, you can safely skip reading this chapter. If, instead you want to define variations of your project optimized for different screen sizes, formats, operating systems, disabilities or languages, you can add other renditions to your project.

To do this you can use the renditions control in the upper right corner of the project window:

Renditions Control

Initially you will only be able to add a new rendition, but when you have more than one, you can easily switch between them here. To add or manage renditions, choose Edit Project Formats… or Edit Project Localizations…, this will open the right tab in the Project Settings window, allowing you to easily manage the list of page formats and localizations.

page formats

project localizations

When switching to a non-default rendition, you will see e blue bullet icon next to its name in the renditions control, reminding you that what you’re currently editing is not the default rendition:

Renditions Control

Every change that you make while using a non-default rendition will only be applied to that (current) rendition: for example, if you move an object and then switch back to the default rendition you’ll see it return to its original position. When in a non-default rendition, you can easily recognize every change that is specific to this rendition in the inspector panel: the specific values will be highlighted with the same blue bullet icon, and clicking it you will also be able to delete the custom value or copy/move it back to the default rendition.

selection inspector

So, for example, to localize your English content in another language, say Spanish, you create a spanish rendition and switch to it, then start replacing all the text in the pages with the spanish translation: when you do it, you will see a blue bullet appering near the translated properties of the objects in the inspector (for example, in the image above, the title of a button has been translated to the spanish “botón”), and you can always switch to the english rendition to see the original text is still there.

Here you can see an example of how to translate a text into another language:

Translating

This is not only for text and contents: every propety you see in the inspector panels can be customized, creating completely different layouts and even different sets of pages. For example, you could create an “English for dyslexic” localization and optimize the contents for people affected by dyslexia (e.g. by simply setting the project font to OpenDyslexic, an optimized font bundled with PubCoder), or have an educational book that displays text in portrait and exercises in landscape: the limit is truly your imagination.

Exporting Renditions

Depending on the export format that you choose, you will be able to export one rendition or combine more renditions in a single exported file: EPUB and KF8 support one rendition at the time, while all other formats support multiple renditions. This means that, for example, you will have to create and publish 2 different EPUBs to have the two versions of your book in English and French, but you may create a single XPUB or iOS App or Android app or HTML widget containing both translations and the user will be able to switch between them.

To create a multiple-renditions file, simply go to the correct tab for your export format in the Project Settings window, turn on option Manage Renditions Manually and select the renditions you want to bundle:

manage multiple renditions

You can even restrict page formats to a specific family of devices, smartphones or tablets, by disabling the respective icon. The reader will automatically select the correct rendition basing on screen size and device language, and the end user will also be able to change language using the “flag” icon in the reader UI.