View Single Post
Old 03-05-2016, 01:07 PM   #1
odedta
Addict
odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.odedta read the news today, oh boy.
 
Posts: 398
Karma: 96448
Join Date: Dec 2013
Device: iPad
Namo PubtreeViewer App for Android

Namo PubtreeViewer App for Android, The Holy Grail of reading apps?

I admit, it doesn't offer the most intuitive interface, nor is it abundant with features (to say the least) but, at least it does what it says on "the box" unlike many reading apps I have tried over the past few days.

You could say I've tried them all, I have created an RTL-Fixed-Layout-Audio-Embedded monster, yes. A Validated, Standard-Compliant EPUB3 With double spread pages, RTL'ed and Audio files (mp3/m4a) embedded into it.

This unknown app with around ~1,000 downloads is just starting it's way into the ePub reading apps store and is already showing great promise, I highly recommend it!




...
For those of you who are curious to know of the necessary meta data and encodings needed for this sort of EPUB, look at the following details. Please note that these settings should work for iBooks and most of the Android Reading apps, all of the apps would have bugs like displaying audio controls or displaying 1 page instead of 2 page spread etc, Namo app works best, there they are:
  1. MP3/m4a files: both of them should work just fine for Android (*Sidenote: mp3 for Kindle and m4a for iBooks), make sure to encode with Stereo and AAC encoder, 256kbps (recommended) and 48kHz
  2. CSS Reset: Make sure to include the cssreset-min.css from http://yuilibrary.com/
  3. File Structure: 1 Image (and possible audio file embedded) per HTML file, a toc.html (a must for epub3) and com.apple.ibooks.display-options.xml include..
    Spoiler:
    Code:
    <?xml version='1.0' encoding='utf-8'?>
    <?xml version='1.0' encoding='utf-8'?>
    <display_options>
      <platform name="*">
        <!-- all devices -->
        <option name="fixed-layout">true</option>
        <!-- fixes the layout -->
        <option name="specified-fonts">false</option>
        <!-- set to "true" when embedding fonts -->
        <option name="open-to-spread">true</option>
        <!-- single page or full spread on open -->
        <!--<option name="orientation-lock">landscape-only</option>				"landscape-only" or "portrait-only" or leave this line commented -->
        <option name="interactive">false</option>
        <!-- set to "true" when using javascript or canvas -->
      </platform>
    </display_options>
  4. A little bit more CSS:
    Spoiler:
    Code:
    .body {
      position: relative;
      font-size: 1.5em;
      width: 1240px;
      height: 1240px;
      margin: 0;
      padding: 0;
    }
    .img {
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      width: 1240px;
      height: 1240px;
    }
  5. This is where the magic happens:
    content.opf:
    Spoiler:
    Code:
    <package xmlns="http://www.idpf.org/2007/opf" dir="rtl" prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/ rendition: http://www.idpf.org/vocab/rendition/#" unique-identifier="pub-id" version="3.0">
    
    <dc:language>he</dc:language>
    
    <meta property="ibooks:specified-fonts">false</meta>
    <meta property="ibooks:iphone-orientation-lock">landscape</meta>
    <meta property="ibooks:ipad-orientation-lock">landscape</meta>
    
    <meta property="rendition:layout">pre-paginated</meta>
    <meta property="rendition:orientation">landscape</meta>
    <meta property="rendition:spread">both</meta>
    
    <spine toc="ncx" page-progression-direction="rtl">
      <itemref idref="cover" properties="rendition:page-spread-center"/>
      <itemref idref="Untitled-1-2" properties="page-spread-right"/>
      <itemref idref="Untitled-1-3" properties="page-spread-left"/>
    ...
    ...
    ...
    </spine>

    sample html file:
    Spoiler:
    Code:
    <?xml version='1.0' encoding='utf-8'?>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    
    <head>
      <title>MyBook</title>
      <meta name="viewport" content="width=1240, height=1240"/>
      <link rel="stylesheet" href="../Styles/cssreset-min.css" type="text/css"/>
      <link rel="stylesheet" href="../Styles/style.css" type="text/css"/>
    </head>
    
    <body class="body" style="width:1240px;height:1240px">
    
      <img class="img" src="../Images/image01.jpg" alt="Image 01"/>
    
    </body>
    
    </html>

Cheers
odedta is offline   Reply With Quote