second column with notes in epub

[kaza]

I'm trying to put together an epub of a verse novel, and its in sort of a two column layout where the main text is on the left and some stanzas have a little explainer in a second column to the right. I would like it to be readable on smaller screens such that the explainers appear on the right if the screen is large enough, and otherwise appears below the stanza its' attached to, like in the attached pictures. i've seen books in the wild that use tables for plays but they always keep both columns and just shrink them when the screen gets smaller rather than moving one column below the other. looking around online it seems like media querries might work but i can't find any examples to copy.

[DNSB]

For some realworld examples, pick up an ebook that was formatted with Vellum. The media stylesheet is a mass of media queries, quite a few of which are related to differences in screen sizes. I've attached one example to this message. This is from an ePub so the amzn-kf8 and amzn-mobi queries were not included.

One issue with using this is that you will find divs multiplying like happy rabbits.

[RbnJrg]

Originally Posted by kaza

I'm trying to put together an epub of a verse novel, and its in sort of a two column layout where the main text is on the left and some stanzas have a little explainer in a second column to the right. I would like it to be readable on smaller screens such that the explainers appear on the right if the screen is large enough, and otherwise appears below the stanza its' attached to, like in the attached pictures. i've seen books in the wild that use tables for plays but they always keep both columns and just shrink them when the screen gets smaller rather than moving one column below the other. looking around online it seems like media querries might work but i can't find any examples to copy.

On epub3 you have grids to get that effect. Try this:

1. In your .css stylesheet:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(100px, 40vw), 1fr));
  gap: 5px;
  justify-content: space-evenly;   
}

.item {
  box-sizing: border-box;
  border: 1px solid blue; /* you can delete this if you wish */
  text-align: center; /* change the alignment as you wish */
}

2. In your .xhtml file:

<div class="container">
  <div class="item">item-a</div>
  <div class="item">item-b</div>
</div>

Reduce the width of the window of your ereader to see how the code works.

[kaza]

Originally Posted by DNSB

For some realworld examples, pick up an ebook that was formatted with Vellum.

do you know of any way to find books formatted with vellum? i have a freind with a mac so i can install it but i'm not sure yet if i'll be able to inspect the htms and css without exporting (which costs more than i'm willing to pay to use something whenever he isnt using his laptop)

Originally Posted by RbnJrg

On epub3 you have grids to get that effect. Try this:

tried it. in sigil it shows 2 columns and they stay as 2 columns when i shrink the preview window. in koreader they become rows no matter how wide the window is.

[RbnJrg]

Originally Posted by kaza

tried it. in sigil it shows 2 columns and they stay as 2 columns when i shrink the preview window. in koreader they become rows no matter how wide the window is.

Open the code with any of the Sigil plugin (JSReader, Readium, BibiReader). With a normal width, you must see two columns, one row; when the width is reduced, you have only one column with two rows.



KOReader is an epub2 ereader and it doesn't support grid. This is only for epub3 ereaders.

By chance, did you link the stylesheet to your .xhtml file?

[JSWolf]

Originally Posted by DNSB

For some realworld examples, pick up an ebook that was formatted with Vellum. The media stylesheet is a mass of media queries, quite a few of which are related to differences in screen sizes. I've attached one example to this message. This is from an ePub so the amzn-kf8 and amzn-mobi queries were not included.

One issue with using this is that you will find divs multiplying like happy rabbits.

Do those media queries actually work on a small screen? I've never used them.

[Turtle91]

Originally Posted by JSWolf

Do those media queries actually work on a small screen? I've never used them.

Basically size doesn't matter... It's all about how well you use it.

media queries simply tell you what the size of the screen is (among other things)...
- if the media meets a particular requirement it runs particular css. If it doesn't, it doesn't. Use css cascading/priority rules to determine what css takes priority.

supports queries tells you whether a device supports a particular css
- if the device supports a particular css it runs it. If it doesn't, it either doesn't do anything, or it runs alternate css. Use css cascading/priority rules to determine what css takes priority.

javascript runs a script on devices that support js...it doesn't on devices that don't.

Use combinations of all of the above, with fallback coding. If the above doesn't work it will fallback to to previous css.

[kaza]

Originally Posted by RbnJrg

Open the code with any of the Sigil plugin (JSReader, Readium, BibiReader). With a normal width, you must see two columns, one row; when the width is reduced, you have only one column width two rows.

thanks, that worked. is there any way to tell readers to prioritize moving the 2nd box under the first one rather than creating line breaks? or if not can i set a suggested minimum size for one of the boxes?

also i guess since koreader is an epub2 reader (i thought its worked with any epub3 features ive come across but either i was mistaken or its just a subset of epub3) and the 2nd box displayed under the 1st its good and i dont need to dive into media querries.

[RbnJrg]

Originally Posted by kaza

thanks, that worked. is there any way to tell readers to prioritize moving the 2nd box under the first one rather than creating line breaks? or if not can i set a suggested minimum size for one of the boxes?

I don't understand you very well. By default, the second box will go under the first one when the width is not enoug to contain both boxes.

also i guess since koreader is an epub2 reader (i thought its worked with any epub3 features ive come across but either i was mistaken or its just a subset of epub3) and the 2nd box displayed under the 1st its good and i dont need to dive into media querries.

Why not media queries? You can have the best of both world. By the way, ADE 4.x. although is an ereader that supports epub3, it doesn't support "grid", so you need some other solution there. The best and simpler solution is by using "grid" but also you can use "flex-box" but you need to write more code. A simple an complete solution with grid, that uses media-queries, is the following:

1. In your .xhtml file write:

  <div class="container">
    <div class="mainColumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</div>

    <div class="secondColumn">Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</div>
  </div>

2. In your .css file:

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 1fr; /* by default, one column */
  gap: 10px;
}

.mainColumn {
  text-align: left;
}

.secondColumn {
  text-align: left;
  font-size: 0.9em;
  font-weight: 600;
  padding-left: 16px;
}

/* Media query for wider screens */
@media (min-width: 300px) { /* Change to the width of your wishes */
  .container {
    grid-template-columns: 2fr 1fr; /* When the screen is wider than 300px, 2 cols */
  }
}

So when the width of the screen is lower than 300px, the layout will be of the only one column; otherwise, two columns.

But also you can have the same output by mean of flex-box. The code is a bit more complex:

1. In your .xhtml file:

  <div class="container">
    <div class="mainColumn">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</div>

    <div class="secondColumn">Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</div>
  </div>

So, the .xhtml is the same no matter if you employ grid or flex-box.

2. In your .css stylesheet:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.mainColumn {
  flex: 70%;
  text-align: left;
  padding-bottom: 10px;
}

.secondColumn {
  flex: 30%;
  text-align: left;
  font-size: 0.9em;
  font-weight: 600;
  padding-left: 16px;
}

@media (max-width: 300px) { /* Change the width you want here */
  .mainColumn, .secondColumn {
    flex: 100%;
  }
}

Both solutions work fine; here you have some screenshots:



Below I attach an epub with the complete solution so you can understand better the code. OF COURSE, THIS IS ONLY FOR EPUB3, it won't work under epub2.