Formatting dialogue in HTML in Blogspot article

blogger

How do I write good-looking dialogue in a Blogspot article? There doesn't seem to be a way of doing it in "editor mode", so I'm hoping there's some convenient HTML command for it. I'm envisioning something like this (created in paint), but I'm open to suggestions:dialogue

EDIT: I tried both ways you suggested. Here's the article:

blah blah

<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person A </div> 
<div style='display:inline-block; width: 60%; margin-right: 2em;'> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person b </div> 
<div style='display:inline-block; width: 70%; margin-right: 2em;'> 
I am saying words ... whatever words person B is saying ... </div>

blaaaaah

<div class="nameText"> 
Person A </div> 
<div class="dialogText"> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div class="nameText"> 
Person b </div> 
<div class="dialogText"> 
I am saying words ... whatever words person B is saying ... </div>

blah

Here's how it turned out:

screenshot

Here's the entire CSS field.

.profile-img{
height: auto;
width: 240px;
}
.goog-inline-block.dummy-container div, .goog-inline-block.dummy-container div iframe ssyby, .goog-inline-block.dummy-container div iframe{
width: 32px !important;
}
nameText {
    display:inline-block; 
    width: 30%; 
    margin-right: 2em;
}
dialogText {
    display:inline-block; 
    width: 60%; 
    margin-right: 2em;
}

By the way, if there's a way to make this work, can something be added to nameText to make it italic by default?

EDIT: Added the dots to the CSS so it's .nameText and .dialogText. Here's how it turned out:

screenshot2

Best Answer

Blogger does not provide any direct support for this. But you can achieve it by switching to the Edit HTML mode of the post editor, and putting some extra control HTML code into your post.

There are two HTML approaches: tables, or using divisions with in-line blocks. I recommend the latter, because it gives you more options for readers who use mobile devices: it's likely that you need to consider how the dialog should look for them as well as for readers who use a PC.

The following would be my starting point for such code. But depending on how you want it to look on narrow screens, I might change it and assign actual pixel widths (chosen to sum to less than the post-body width used in non-mobile) instead of percentages.

<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person A </div> 
<div style='display:inline-block; width: 60%; margin-right: 2em;'> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person b </div> 
<div style='display:inline-block; width: 70%; margin-right: 2em;'> 
I am saying words ... whatever words person B is saying ... </div>

That said, there is an improvement to this, approach.

Rather than repeating the formatting information over and over, declare a couple of styles, and add the CSS for them to your template (info about how to do this). Then you simply add calls to those styles to your blog-post content.

The styles might be

.nameText {
    display:inline-block; 
    width: 30%; 
    margin-right: 2em;
}

.dialogText {
    display:inline-block; 
    width: 60%; 
    margin-right: 2em;
}

Then the HTML edits you need to make to your posts are a lot simpler:

<div class="nameText"> 
Person A </div> 
<div class="dialogText"> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div class="nameText"> 
Person b </div> 
<div class="dialogText"> 
I am saying words ... whatever words person B is saying ... </div>
Related Topic