suggestions on how to format speaking parts

rosshalde · 11-24-2014, 10:43 AM

Hello,

I am working on a book with speaking parts

On the left are the names of the characters in one type of font and italics
On the right are the lines of the character. They are a different font and bold.
The issue is dealing with the spacing. The words on the right are all evenly indented from the far left. I am including a pic of one page so you can see what I mean. Any suggestions on how to do this would be appreciated.
I am thinking about a table with no border around it.
Or should I just use the css to style the two different font and margins?

odedta · 11-24-2014, 01:00 PM

I think table is a good option, if you use CSS then it can get screwed if user changes the font size.

rosshalde · 11-24-2014, 01:09 PM

The only way I know how do tables is:

<table style="width:100%">
<tr>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>

</body>
</html>

Some concerns:
1) the width will look weird if there is only one or two words by the character...other times there may be two sentences.

2) Are tables subject to the readers font-size increase? If so, how do they not totally wreck the layout of the table if it can't fit on their display at larger font sizes.

Is there a better way to do all this?

Jellby · 11-24-2014, 01:53 PM

I wouldn't try to reproduce that layout, it gets ugly in narrow screens. I'd rather go for something like:

First child
"I am Jack."

Second child
"And I am Jill."

Code:

<p><span class="speaker">First child</span>"I am Jack."</p>
<p><span class="speaker">Second child</span>"And I am Jill."</p>

Code:

p { margin: 1em 0; }
span.speaker {
  display: block;
  text-align: left;
  font-size: 80%,
  font-style: italic;
}

rosshalde · 11-24-2014, 08:41 PM

Ok, I tried your code and got it to work.
I am confused a bit though. With only the two <p> tags, how did I end up with four lines?
I understand that the <span> tells the file do something different to what is encased between the span, from what should be done to the normal <p>, but what told it to start a new line? From experiment it is the
display: block
but I am not sure what that all means

GMcG · 11-25-2014, 03:19 AM

If you use a table, you should add a blank cell between speaker and speach, so you get some space between the cells. Like
<tr>
<td>First child:</td>
<td> </td>
<td>"I am Jack."</td>
</tr>
In another thread it was recommended to make each row a single table to avoid a possible break of the table at a page-break.
I think, you don't need table-width="100%", because the text takes the space it needs and widens the table if necessary instead of a line-break.

In css you could get a table-like layout with:

<head>
<style type="text/css">

p.speaker {
text-align: left;
margin-bottom: -1.25em;
font-size: 1em;
font-style: italic;
text-indent: 0em;
}
p.speach {
margin-top: -1.25em;
margin-bottom: -1em;
margin-left: 8em;
font-size: 1em;
text-indent: 0em;
}
</style>
</head>

<body>
<p class="speaker">First child:</p>
<p class="speach">"I am Jack."</p>
<p class="speaker">Second child:</p>
<p class="speach">"And I am Jill."</p>

</body>

I think, it looks fine, though it might be a little tricky with the margins.

George

AlexBell · 11-25-2014, 04:17 AM

You might like to have a look at Aristophanes and War by Aristophanes, and The Trojan Women by Euripides in the MobileRead library. The character names in these plays are in small capitals, which I think makes them stand out from the text they speak with rather less markup than the suggestions made so far. I suppose a lot depends on how many times you have to identify the characters.

Toxaris · 11-25-2014, 05:45 AM

What you could do is use <dt> and <dd> tags and style those. That would eliminate the need for those pesky tables.

Jellby · 11-25-2014, 08:26 AM

Quote:

Originally Posted by rosshalde

With only the two <p> tags, how did I end up with four lines?

There are two basic display types in CSS/HTML: block and inline. Block elements force a linebreak before and after, and take all the available width. Inline elements do not introduce linebreaks and keep their natural width.

By default, elements like <p>, <div>, <blockquote>, <h1>... are block, and <i>, <strong>, <a>, <img>, <span>... are inline. But the "display" property can change that.

Actually, I could have used <div> instead of <span>, and removed the "display: block", but there is a rule that <p> cannot contain default-block elements, so I'd have to put the <div> outside <p>, and it starts to be messy.

11-24-2014, 10:43 AM	#1
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	suggestions on how to format speaking parts Hello, I am working on a book with speaking parts On the left are the names of the characters in one type of font and italics On the right are the lines of the character. They are a different font and bold. The issue is dealing with the spacing. The words on the right are all evenly indented from the far left. I am including a pic of one page so you can see what I mean. Any suggestions on how to do this would be appreciated. I am thinking about a table with no border around it. Or should I just use the css to style the two different font and margins? Attached Thumbnails

11-24-2014, 01:53 PM	#4
Jellby frumious Bandersnatch Posts: 7,548 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I wouldn't try to reproduce that layout, it gets ugly in narrow screens. I'd rather go for something like: First child "I am Jack." Second child "And I am Jill." Code: <p><span class="speaker">First child</span>"I am Jack."</p> <p><span class="speaker">Second child</span>"And I am Jill."</p> Code: p { margin: 1em 0; } span.speaker { display: block; text-align: left; font-size: 80%, font-style: italic; }

11-25-2014, 03:19 AM	#6
GMcG Writer Posts: 101 Karma: 590630 Join Date: Mar 2011 Location: Munich, Germany Device: none	If you use a table, you should add a blank cell between speaker and speach, so you get some space between the cells. Like <tr> <td>First child:</td> <td> </td> <td>"I am Jack."</td> </tr> In another thread it was recommended to make each row a single table to avoid a possible break of the table at a page-break. I think, you don't need table-width="100%", because the text takes the space it needs and widens the table if necessary instead of a line-break. In css you could get a table-like layout with: <head> <style type="text/css"> p.speaker { text-align: left; margin-bottom: -1.25em; font-size: 1em; font-style: italic; text-indent: 0em; } p.speach { margin-top: -1.25em; margin-bottom: -1em; margin-left: 8em; font-size: 1em; text-indent: 0em; } </style> </head> <body> <p class="speaker">First child:</p> <p class="speach">"I am Jack."</p> <p class="speaker">Second child:</p> <p class="speach">"And I am Jill."</p> </body> I think, it looks fine, though it might be a little tricky with the margins. George Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CHM Format Book Reader Suggestions	bibliotecario	Windows Devices	1	07-06-2014 04:47 AM
Suggestions for the FB3 format	rsperberg	Reading and Management	7	01-31-2006 10:58 AM
Speaking of spam...	gvtexas	Lounge	1	06-28-2004 12:28 AM
Suggestions for MP3 format webcasts	volcanopele	Lounge	5	05-30-2003 06:33 PM

11-24-2014, 01:00 PM	#2
odedta Addict Posts: 398 Karma: 96448 Join Date: Dec 2013 Device: iPad	I think table is a good option, if you use CSS then it can get screwed if user changes the font size.

11-24-2014, 01:09 PM	#3
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	The only way I know how do tables is: <table style="width:100%"> <tr> <td>xxx</td> <td>xxx</td> </tr> <tr> <td>xxx</td> <td>xxx</td> </tr> </table> </body> </html> Some concerns: 1) the width will look weird if there is only one or two words by the character...other times there may be two sentences. 2) Are tables subject to the readers font-size increase? If so, how do they not totally wreck the layout of the table if it can't fit on their display at larger font sizes. Is there a better way to do all this?

11-24-2014, 08:41 PM	#5
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Ok, I tried your code and got it to work. I am confused a bit though. With only the two <p> tags, how did I end up with four lines? I understand that the <span> tells the file do something different to what is encased between the span, from what should be done to the normal <p>, but what told it to start a new line? From experiment it is the display: block but I am not sure what that all means

11-25-2014, 04:17 AM	#7
AlexBell Wizard Posts: 3,413 Karma: 13369310 Join Date: May 2008 Location: Launceston, Tasmania Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet	You might like to have a look at Aristophanes and War by Aristophanes, and The Trojan Women by Euripides in the MobileRead library. The character names in these plays are in small capitals, which I think makes them stand out from the text they speak with rather less markup than the suggestions made so far. I suppose a lot depends on how many times you have to identify the characters.

11-25-2014, 05:45 AM	#8
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	What you could do is use <dt> and <dd> tags and style those. That would eliminate the need for those pesky tables.

Advert

Advert