Table Alternative?

[bdub]

I am attempting to create an ePub. I moved the text into a Word DOCX and did some formatting there, and then I converted it to an ePub in Calibre. Now, I'm making some adjustments to the bits that aren't working as expected.

And I'm stuck on one bit. The rest I should be good to sort out.

What's the best way to reformat this part, so that the bits line up like in the printed text without it being in a table?

<table class="table_">
<tbody class="calibre4"><tr class="tr_">
<td class="td_"><p class="block_10">☊</p></td>
<td class="td_"><p class="block_10">☋</p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_3">Y'AI 'NG'NGAH, </p></td>
<td class="td_"><p class="block_3">OGTHROD AI'F </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_11">YOG-SOTHOTH </p></td>
<td class="td_"><p class="block_3">GEB'L—EE'H </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_3">H'EE—L'GEB </p></td>
<td class="td_"><p class="block_11">YOG-SOTHOTH </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_3">F'AI THRODOG </p></td>
<td class="td_"><p class="block_3">'NGAH'NG AI'Y </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_11">UAAAH </p></td>
<td class="td_"><p class="block_11">ZHRO </p></td>
</tr>
</tbody></table>

I haven't renamed and redid the CSS yet, so the current definitions for block_11 and block_ 3 are:

.block_3 {
display: block;
line-height: 1.2;
margin: 0;
padding: 0;
text-indent: 1.5em;
text-align: justify;
}

.block_11 {
display: block;
font-style: italic;
line-height: 1.2;
margin: 0 0 8pt;
padding: 0;
}

The italics is wrong as well as the justify.

This is from this section of the book. The author died over 70 years ago, so this should be in public domain.

https://en.wikisource.org/wiki/Page%...-_1971.pdf/101

Thanks.

[Karellen]

That looks like a simple centre.

<p class="centre">Y'AI 'NG'NGAH,</p>
<p class="centre">OGTHROD AI'F </p>


.centre {
text-align: center;
text-indent: 0;
}

[DNSB]

I made a few changes to the CSS since much of it was missing and other parts didn't make sense.

Spoiler:

  <table class="table_">
    <tbody class="calibre4">
      <tr class="tr_">
        <td class="td_"><p>☊</p></td>

        <td class="td_"><p>☋</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p>Y'AI 'NG'NGAH,</p></td>

        <td class="td_"><p>OGTHROD AI'F</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p class="italic">YOG-SOTHOTH</p></td>

        <td class="td_"><p>GEB'L—EE'H</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p>H'EE—L'GEB</p></td>

        <td class="td_"><p class="italic">YOG-SOTHOTH</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p>F'AI THRODOG</p></td>

        <td class="td_"><p>'NGAH'NG AI'Y</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p class="italic">UAAAH</p></td>

        <td class="td_"><p class="italic">ZHRO</p></td>
      </tr>
    </tbody>
  </table>

and here is the modified CSS:

Spoiler:

table {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
}

td {
  vertical-align: baseline;
}

th {
heigth: 1.5em;
  width: 35%;
}

.td_ {
text-align: center;
}

.italic {
  font-style: italic;
}

I didn't bother with adding table_ and tr_ to the CSS since this was just a quick and dirty test.

[Karellen]

Hmm, just looked at the wikipedia example again, wondering how I completely misunderstood the OP, but it is now pointing to a different page with two centred columns.

I guess that is why the post has been edited.

[enuddleyarbl]

I'd recommend deleting all those <p></p> pairs inside the <td></td> elements and moving any classes modifying those <p></p> pairs into the <td></td>. Having <p></p> within <td></td> always seems to mess up formatting for me (particularly line spacing).

    <table class="table_">
    <tbody class="calibre4">
      <tr class="tr_">
        <td class="td_">☊</td>

        <td class="td_">☋</td>
      </tr>

      <tr class="tr_">
        <td class="td_">Y'AI 'NG'NGAH,</td>

        <td class="td_">OGTHROD AI'F</td>
      </tr>

      <tr class="tr_">
        <td class="td_ italic">YOG-SOTHOTH</td>

        <td class="td_">GEB'L—EE'H</td>
      </tr>

      <tr class="tr_">
        <td class="td_">H'EE—L'GEB</td>

        <td class="td_ italic">YOG-SOTHOTH</td>
      </tr>

      <tr class="tr_">
        <td class="td_">F'AI THRODOG</td>

        <td class="td_">'NGAH'NG AI'Y</td>
      </tr>

      <tr class="tr_">
        <td class="td_ italic">UAAAH</td>

        <td class="td_ italic">ZHRO</td>
      </tr>
    </tbody>
  </table>

[RbnJrg]

If you don't want to use a table, there's the option (and in this case, I'd say it's preferable) of a two-column layout based on the "display: inline-block" property. A quick solution could be the following:

XHTML Code:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

CSS Code:

  .wrapper {
    text-align: center;
    width: 100%;
  }

  .column {
    display: inline-block;
    width: 40%;
    text-align: center;
    vertical-align: top;
  }

  .column p {
    margin: 0;
    text-indent: 0;
  }

Of course, the above code can be improved since I didn't take optimization into account here, but rather to give the idea of ​​how the "display: inline-block" property (the basis of the entire design) should be used to achieve the desired effect.

[bdub]

Originally Posted by Karellen

Hmm, just looked at the wikipedia example again, wondering how I completely misunderstood the OP, but it is now pointing to a different page with two centred columns.

I guess that is why the post has been edited.

I had a bad copy and paste that I didn't catch until after I had posted.

[bdub]

Originally Posted by RbnJrg

If you don't want to use a table, there's the option (and in this case, I'd say it's preferable) of a two-column layout based on the "display: inline-block" property. A quick solution could be the following:

XHTML Code:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

CSS Code:

  .wrapper {
    text-align: center;
    width: 100%;
  }

  .column {
    display: inline-block;
    width: 40%;
    text-align: center;
    vertical-align: top;
  }

  .column p {
    margin: 0;
    text-indent: 0;
  }

Of course, the above code can be improved since I didn't take optimization into account here, but rather to give the idea of ​​how the "display: inline-block" property (the basis of the entire design) should be used to achieve the desired effect.

This approach is rendering what I'd like to see in the preview in Calibre. I did reduced the width in .column to 20%.

I asked for a non-table version because I've had issues with tables rendering on my KOBO.

I'm still cleaning up the CSS and formatting, but I should be able test out this approach this weekend on my KOBO.

I do need to better understand what inline block actually does, so I'll dig in more this weekend.

What do you mean by optimization here?

Thanks everyone else for the other suggestions too.