Sidebars in Kindle books

[valyria]

What is the best way to incorporate sidebars in Mobi books?

My idea is to save the sidebars with the text and background as an image and then insert that image into the file. If I tried to leave the sidebar as text, I was concerned that the Kindle text-to-speech function won't work since it won't differentiate between sidebar content and main content.

Anyone have any ideas on what to do with sidebars?

[RbnJrg]

Originally Posted by valyria

What is the best way to incorporate sidebars in Mobi books?

If I were you, I'd use a styled div (a float div -to left or right-, with color, borders, custom fonts...what you want). But since my K4NT doesn't support TTS, I woudn't know to tell you how a "div" sidebar will work with that feature.

My idea is to save the sidebars with the text and background as an image and then insert that image into the file.

To me, it's not bad idea, especially thinking on TTS.

Below you have an example of a sidebar made with pure css (it works also in ADE). The code I used is:

div#sidebar {
   float: left;
   width: 50%;
   font-size: 120%;
   text-indent: 0;
   text-align: justify;
   margin: 1em 1em 1em 1ex;
   padding: 1em 1em 1em 1ex;;
   border-top: 6px solid black;
   border-bottom: 6px solid black;
}

.fl {
   display: table-cell;
   width: 0.3em;
   font-size: 8em;
   line-height: 80%;
   color: rgb(192, 192, 192);
}

.tf {
   display: table-cell;
   vertical-align: bottom;
   padding-left: 0.5em;
}

and in the .html file:

<div id="sidebar">
    <div class="fl">
      “
    </div>

    <div class="tf">
       ... Some text...
    </div>
</div>

Regards
Rubén

[Hitch]

Originally Posted by RbnJrg

If I were you, I'd use a styled div (a float div -to left or right-, with color, borders, custom fonts...what you want). But since my K4NT doesn't support TTS, I woudn't know to tell you how a "div" sidebar will work with that feature.
<snip the code>

Regards
Rubén

Rubén:

Sorry, only glanced at this: what's the fallback for K7?

Hitch

[RbnJrg]

Originally Posted by Hitch

Rubén:

Sorry, only glanced at this: what's the fallback for K7?

Hitch

Hi Hitch;

For K7 things are difficult Under K7 you better forget about the sidebars If that is the case, then Valyria will have to make magic in order to incorporate them. Of course, we can have media queries to manage some code for mobi8 and some code for mobi7 but, what code for mobi7? Right now I can't think of anything

Regards
Rubén

[Hitch]

Originally Posted by RbnJrg

Hi Hitch;

For K7 things are difficult Under K7 you better forget about the sidebars If that is the case, then Valyria will have to make magic in order to incorporate them. Of course, we can have media queries to manage some code for mobi8 and some code for mobi7 but, what code for mobi7? Right now I can't think of anything

Regards
Rubén

Rubén:

Well, that's kind of my point. It's not clear to me that the OP knows that this solution won't work for millions of e-ink Kindles. I mean, not only will it not work, it'll be an unreadable mess. Nor will it work to make them as images and cram them, floating, into the text, as K7 can't float images. There's a solution, that would work both in K8 and K7, but it requires a lot of "hands in file" time and coding.

A better solution is to come up with a box-like formatting that will work across all devices, particularly for a beginner. I don't know what this person's skill level is, as asking about using sidebars for a MOBI file in the first place somewhat indicates an unfamiliarity with MOBI formatting.

Valyria: Can you tell us what your familiarity and skill level is, so maybe we can help you with something suitable? The coding that Ruben gave you is not going to work unless you're making a fixed-format book for Kindle, and if you're doing that, you're going to need a mess of additional formatting as well. Is this for your personal use or do you plan to put it on sale, and if the latter, are you trying to make a fixed-format book that will be limited to K8 devices only?

Hitch

[RbnJrg]

Originally Posted by valyria

What is the best way to incorporate sidebars in Mobi books?

Hi valyria;

As Hitch told previously, if you plan to build your book for mobi7 (old book type of Kindle) then you can't have sidebars because mobi7 doesn't support the property "float" (nor many other properties ). So when you build a book for Kindle, you have to have a code for mobi8 (the modern type of books) and a code for mobi7 (the old type of books). I could find something that is readible for mobi7 and also allows sidebars in mobi8. The code is the following:

@media amzn-kf8 { /* this code only applies for mobi8 books*/

hr.m7 {
  display: none; /* horizontal lines are hidden under mobi8 */
}

div#sidebar {
 float: left;
 width: 50%;
 font-size: 120%;
 text-indent: 0em;
 text-align: justify;
 margin: 1em 1em 1em 1ex;
 padding: 1em 1em 1em 1ex;;
 border-top: 6px solid black;
 border-bottom: 6px solid black;
}

.fl {
 display: table-cell;
 width: 0.3em;
 font-size: 8em;
 line-height: 80%;
 color: rgb(192, 192, 192);
}

.tf {
 display: table-cell;
 vertical-align: bottom;
 padding-left: 0.5em;
}
}

@media amzn-mobi {  /* this code only applies for mobi7 books*/
hr.m7 {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
 }

div#sidebar {
 text-align: center;
}

.fl {
 display: none; /* this class is hidden under mobi7 */
}

.tf {
 font-size: 1.2em;
 font-weight: bold;
 margin-left: 20%;
}
}

and in the .html page:

<hr class="m7" />

<div id="sidebar">
    <div class="fl">
      “
    </div>

    <div class="tf">
    ...sometext...
    </div>
</div>

<hr class="m7" />

Below you can see a screenshot about how the book looks in mobi8 and in mobi7.

Regards
Rubén

[PoP]

Originally Posted by valyria

...
If I tried to leave the sidebar as text, I was concerned that the Kindle text-to-speech function won't work since it won't differentiate between sidebar content and main content
...

Originally Posted by RbnJrg

If I were you, I'd use a styled div (a float div -to left or right-, with color, borders, custom fonts...what you want). But since my K4NT doesn't support TTS, I woudn't know to tell you how a "div" sidebar will work with that feature
....

Just to report my Kindle Keyboard 3.4 TTS results : The normal text is spoken and as the ereader encounters the sidebar text, it speaks all of it and then resumes speaking the normal text. That happens regardless of the way the sidebar is displayed, floating left or as a simple insert.

[DaleDe]

Originally Posted by PoP

Just to report my Kindle Keyboard 3.4 TTS results : The normal text is spoken and as the ereader encounters the sidebar text, it speaks all of it and then resumes speaking the normal text. That happens regardless of the way the sidebar is displayed, floating left or as a simple insert.

this is often what the user would do also so I would think this is ok. A sidebar should not start inside a paragraph for this reason.

Dale