Aligning half of a sentence to the right?

[Tenome]

I'm new to making epubs, so I'm not sure if this is possible or how I would go about it. I'm making an epub version of an old scanned book. Is it possible to have this exact text alignment in an epub, or at least close to it? Left side aligned left, right side (same sentence line) aligned right (but also aligned left with each other). I'm guessing I have to do something weird with the stylesheet rules, but I'm not sure where to start. I'm using Sigil if that matters.

[JSWolf]

Originally Posted by Tenome

I'm new to making epubs, so I'm not sure if this is possible or how I would go about it. I'm making an epub version of an old scanned book. Is it possible to have this exact text alignment in an epub, or at least close to it? Left side aligned left, right side (same sentence line) aligned right (but also aligned left with each other). I'm guessing I have to do something weird with the stylesheet rules, but I'm not sure where to start. I'm using Sigil if that matters.

Use a table for this. Two columns and make the left column with 4 rows and the right column with no rows and centered. Also turn off the lines.

[Tenome]

Ahh, a table. That makes sense. Thanks, I'll try that.

[jhowell]

If the equations in the book become more complex you may not be able to get an acceptable rendering of them using just text. Many published books just use images for equations. MathML is a cleaner alternative but is not widely supported on e-book readers.

[RbnJrg]

You can use a table, as it was appointed or, what it seems to be in the present case easier, practical and flexible, to employ the css property "display: inline-block". For example:

1. In your .xhtml file:

  <p>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.</p>

  <p class="notation top">15 = 3 . 5</p>

  <p class="notation">16 = 2 . 2 . 2 . 2 = 2<sup>4</sup></p>

  <p class="meaning">a fourth power</p>

  <p class="notation">17 = 17</p>

  <p class="meaning">a prime</p>

  <p class="notation bottom">18 = 2 . 3 . 3 = 2 . 3<sup>2</sup></p>

  <p>Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris.</p>

2. In your .css stylesheet:

p {
  text-indent: 1.2em;
  text-align: justify;
  font-size: 1em;
  margin: 0;
}

.notation, .meaning {
  display: inline-block;
  margin: 0.25em 1.2em;
  font-size: 1em;
  text-align: left;
  text-indent: 0; 
}

.notation {
  width: 45%;
}

.meaning {
  width: 30%;
}

sup {
  line-height: 0;
  font-size: 0.6em;
}

.top {
  margin-top: 1em;
}

.bottom {
  margin-bottom: 1em;
}

By employing this code is easier to do changes and is a more practical thing when you only need to write an expression of only one row. This is how it looks in Sigil:



Of course, is up to you to decide what to employ, if a table or inlined blocks.

[Turtle91]

Does MathML display properly inside a table?

[JSWolf]

There is another more compatible solution then MathML. That is using SVG to show the match.

[Turtle91]

Originally Posted by JSWolf

There is another more compatible solution then MathML. That is using SVG to show the match.

I honestly know nothing about MathML compatibility…. It just seems like devices that are too old to properly display MathML would likewise choke on inline svg. You’d have to put the svg coding into an image file and then insert the image of the svg… which kinda bypasses a lot of the functionality/reflowability of MathML, wouldn’t it??

[JSWolf]

Originally Posted by Turtle91

I honestly know nothing about MathML compatibility…. It just seems like devices that are too old to properly display MathML would likewise choke on inline svg. You’d have to put the svg coding into an image file and then insert the image of the svg… which kinda bypasses a lot of the functionality/reflowability of MathML, wouldn’t it??

Sony Readers work with SVG. RMSDK (too old) on Kobo (for ePub) with SVG. But they do not work with MathML. These are just some examples of where SVG will work but MathML not.

[CubGeek]

Originally Posted by Tenome

Ahh, a table. That makes sense. Thanks, I'll try that.

I'm fairly new to this, like you. One thing that I've been learning is that, usually, the simplest method is best. Not always, but very quite often.