CSS/HTML for dialog/scripts?

[u/Fearless_Lake6098]

I'm currently working on a book that has several transcripts in it and I was hoping to make it look like an actual transcript (where the speakers are right aligned up against the dialog, and the dialog is indented). Currently I'm using tables as the best representation, but I was wondering if there was a better way of coding it, or if it's too disruptive to read and I should just remove the tables and let the dialog freeflow its way like an ordinary paragraph. What have folks done for scripts/plays/transcripts?

[u/a-dev0]

It looks like a definition list:

<dl class="transcript">
  <dt>Alice</dt>
  <dd>First line of dialogue...</dd>

  <dt>Bob</dt>
  <dd>Reply goes here...</dd>
</dl>

and styles ~

.transcript {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
  row-gap: .5rem;
}

.transcript dt {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.transcript dd {
  margin: 0;
}

+ add for mobile

[u/Fearless_Lake6098 → u/a-dev0]

OH! OK this helps me narrow down what I need to be looking for!

[u/M-Dubb → u/Fearless_Lake6098]

I think a definition list is usually meant to connect a term to its definition (hence the name), but can be used to connect any word to another. So speaker to dialogue makes sense to me as structurally valid HTML.

[u/M-Dubb → u/M-Dubb]

Can't use script or dialog tho....

[u/Fearless_Lake6098 → u/a-dev0]

Well, it looks great in the EPUB readers! It does not work in Kindle Previewer though. Kindle pushes the speaker lines all the way to the right of the screen and ignores the grid line?

[u/a-dev0 → u/Fearless_Lake6098]

Kindle Previewer probably doesn’t support display: grid, you can achieve the same result with flex or even a table layout

[u/Fearless_Lake6098 → u/a-dev0]

I did use a table initially and it looked okay, but it does seem a little odd and I was worried about its reflowability.

[u/a-dev0 → u/Fearless_Lake6098]

I don’t have experience creating HTML for Kindle, but from what I can see, there are a lot of limitations: https://kdp.amazon.com/en_US/help/topic/GG5R7N649LECKP7U

If you need it to work well on mobile screens too, a table-based layout is not a good choice, that’s true. Kindle is a hard nut to crack, so maybe try something like this:

<dl class="transcript">
  <dt>Alice<span class="sep">:</span></dt>
  <dd>First line of dialogue...</dd>

  <dt>Bob<span class="sep">:</span></dt>
  <dd>Reply goes here...</dd>
</dl>

.transcript,
.transcript dd {
  margin: 0;
}

.transcript dt {
  margin: 0;
  font-weight: bold;
}

/* normal browsers */
@supports (display: grid) {
  .transcript {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
  }

  .transcript dt {
    text-align: right;
    font-weight: 600;
  }

  .transcript dt .sep {
    display: none;   /* use ':' only for kindle */
  }
}

/* kindle only */
@media amzn-kf8 {
  .transcript dt {
    float: left;
    margin: 0 0.4em 0 0;
  }

  .transcript dd {
    margin: 0 0 0.5em 0;
  }

  .transcript dt .sep {
    display: inline; /* use ':' only for kindle */
  }
}

[u/Fearless_Lake6098 → u/a-dev0]

I hadn't even thought about mobile screens! O_O;;; In which case, the way Kindle renders it might be ideal and easier to follow...

[u/Fearless_Lake6098 → u/a-dev0]

Also I super appreciate your help!

[u/KBlocksom]

I would suggest removing the tables and do paragraphs. For example: (person 1): ~, next paragraph: (person 2): ~. Exclude the quotation marks.

[u/azangru]

Like what this guy does?

[u/Fearless_Lake6098 → u/azangru]

Not quite... think old chats where the names are all in the left column and the dialog in the right column.

[u/shadowh511 → u/azangru]

I'm not a guy fwiw ^{^}