View Single Post
Old 09-27-2024, 09:40 PM   #4
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,827
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Fitz Frobozz View Post
That makes sense and I had a feeling that would be what's going on here. I'd planned on starting with what I'd do normally and then tweak/revamp as required, but then I realized that I'm not very clear on what is and isn't supported on various devices.

Anyway, here's an illustration of what I am looking for and what gets rendered on the Scribe:
Ok, that is easy and you don't need to employ a flex-box. Here you have an aproximation that works on both, epub and KFX:

1. In your .xhtml file:

Code:
  <div class="left">
    <p>Lorem Ipsum</p>

    <p>Lorem Ipsum</p>
  </div>

  <div class="right">
    <p>Lorem Ipsum</p>
  </div>
2. In your .css file:

Code:
p {
  margin: 0; /* or whatever you want */
  line-height: 1.2em; /* or whatever you want */
  text-align: left; /* or whatever you want */
}

.left {
  float: left;
  width: 49.75%;
}

.right {
  float: right;
  width: 49.75%;
}
Use the above code and your epub will be compatible with epub2/3 ereaders and also with Kindle. An alternative could be to employ two divs with the property "display: inline-block"; something like the following:

1. The same for .xhtml file
2. In you .css file:

Code:
p {
  margin: 0;
  line-height: 1.2em;
  text-align: left;
}

.left {
  display: inline-block;
  width: 49%; /* Here you have to employ a smaller width; before you had 49.75% */
  vertical-align: top;
}

.right {
  display: inline-block; 
  width: 49%; /* Here you have to employ a smaller width */
  vertical-align: top;
}
But for this case, I prefer to employ the solution based on the property "float".

Last edited by RbnJrg; 09-27-2024 at 09:53 PM.
RbnJrg is offline   Reply With Quote