How to add tabs or spaces to a textline with CSS? - html

Question

How can I make a conversation dialogue appear like this:
Person 1: "Hello"
Person 2: "Hi"
I have my dialogue colored with black and yellow
As you can see, the point where the quote starts doesn't match up, so it does look messy that way, I want to make it indent it a little bit and also want the nameblocks have the same width (which will apply to all the names that will be in a dialogue, doesn't matter if it's a long or short name)
And you see that "you" on the third line? Can I make it appear right under the point where the quote starts automatically, if it's possible?
Here's my dialogue:
<p class="smallmargin"><span> <span class="dialogue1"><span class="person1">Harvey: </span> "What are your choices when someone puts a gun to your head?"</span> <span class="dialogue2"></span></span><br />
<span class="dialogue2"><span class="person2">Mike: </span> "What are you talking about? You do what they say or they shoot you." </span> <br />
<span class="dialogue1"><span class="person1">Harvey: </span> "Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things."</span></p>
Here's my CSS mark up:
p.smallmargin {
margin: 0px;
padding: 0px;
line-height:160%;
}
.dialogue1 {
background-color: #FFB100;
color: black;
font-size: 15px;
font-family: 'Arial Black';
}
.dialogue2 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: #FFB100;
background-color:black;
}
.person1 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: #FFB100;
background-color:black;
text-transform: uppercase;
}
.person2 {
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
color: black;
background-color: #FFB100;
text-transform: uppercase;
}
By the way, I know I can add but that means that I have to add that to every dialogue manually and that would be a tiresome job.

Answer 1

As #Mig suggests, You should refactor your classes so that you can set common styles to dialogues and names without duplicating CSS code.
Now for the layout, you can get the table structure without actual HTML tables, using CSS display:table-row and table-cell:
HTML
<span class="dialogue one">
<span class="person">Harvey:</span>
<span class="text">"What are your choices when someone puts a gun to your head?"</span>
</span>
CSS
.dialogue{
display: table-row;
}
.text, .person {
display: table-cell;
}
Demo fiddle
You could also use inline-blocks and a combination of padding and negative margin:
.dialogue{
display: inline-block;
padding-left: 100px;
}
.person{
width: 100px;
margin-left: -100px;
display: inline-block;
}
Here's the demo fiddle for this

Answer 2

You just got to use the power of css classes well :D
So instead of dialogue1 dialogue2 use class dialogue for each line and classes odd / even to change the colors. Then you use the class person instead of person1/2.
Now you say :
.dialogue .person { display: inline-block; width: 30px; }
To avoid the line return of the text spoken I think you should put that text inside a span with class text and :
.dialogue .text { display: table-cell; }
Thank you Ben but I would go further like that:
http://codepen.io/migswd/pen/xbfmw

Answer 3

I know some developers may disagree with my opinion and suggest div or span tags with CSS, but I'd use table tag, like this:
<table class="myChat">
<tr class="row1">
<td class="cell1">Username1</td>
<td class="cell2">text of username1</td>
</tr>
<tr class="row2">
<td class="cell1">Username2</td>
<td class="cell2">text of username2</td>
</tr>
<tr class="row1">
<td class="cell1">Username3</td>
<td class="cell2">text of username3</td>
</tr>
</table>
And the CSS:
.myChat {
/* styling the entire chat box */
}
.myChat tr td {
/* styling font size, padding, etc */
font-weight: bold;
font-family: 'Arial Black';
font-size: 15px;
text-transform: uppercase;
}
.myChat tr.row1 td.cell1 {
width: 150px;/* can be anything you like */
background-color: #FFB100;
color: black;
/* styling the 1st cell of row1, font color, background color, etc. */
}
.myChat tr.row1 td.cell2 {
/* styling the 2nd cell of row1, font color, background color, etc. */
background-color: black;
color: FFB100;
}
.myChat tr.row2 td.cell1 {
width: 150px;/* can be anything you like */
background-color: black;
color: FFB100;
/* styling the 1st cell of row2, font color, background color, etc. */
}
.myChat tr.row2 td.cell2 {
background-color: #FFB100;
color: black;
/* styling the 2nd cell of row2, font color, background color, etc. */
}

Answer 4

Best way to generate such setup is through , add all the conversation in UL LI and add css list-style-type:none, list-style-position:outside