Current version: version 3

Live example and some notes here.

<aside> 🎉 WHAT'S NEW

<aside> 🔖 TABLE OF CONTENTS

</aside>

Example HTML (Version 2)

<!--This is a comment in HTML to explain things-->

<table>
<tbody>

<!--Character 1-->
<tr>
<td><img src="<https://i.imgur.com/0ziSCWx.png>" alt="SilverAsh" width="100%" height="auto" /></td>
<td><p class="dia left">My friend, what are your plans for today?</p></td>
</tr>

<!--Character 2-->
<tr>
<td><img src="<https://i.imgur.com/2P3dO63.png>" alt="Dr. Hana" width="100%" height="auto" /></td>
<td><p class="dia left">Sleeping after work as always, of course. Why did you ask?</p></td>
</tr>

<!--Character 1-->
<tr>
<td><img src="<https://i.imgur.com/0ziSCWx.png>" alt="SilverAsh" width="100%" height="auto" /></td>
<td><p class="dia left">Did you forget? Today is a month after Valentine's Day.</p></td>
</tr>

<!--Character 2-->
<tr>
<td><img src="<https://i.imgur.com/2P3dO63.png>" alt="Dr. Hana" width="100%" height="auto" /></td>
<td><p class="dia left">Oh...White Day, huh? I completely forgot about it.</p></td>
</tr>

</tbody>
</table>

Basic HTML Template

The very basic HTML template is basically:

<!--This is a comment in HTML to explain things-->

<table>
<tbody>

<!--Character 1-->
<tr>
<td><img src="IMAGE LINK" alt="NAME" width="100%" height="auto" /></td>
<td><p class="name">NAME</p><p class="dia left">TEXT HERE</p></td>
</tr>

</tbody>
</table>

If you want to slip in description/stage direction, just add the code below after a dialogue:

<tr>
<td colspan="2" class="desc">TEXT HERE</td>
</tr>

Some explanations

Customization