Best way to code play dialogue format in EPUB? #70
Comments
RachelComerford
added
the
Best Practice
|
Box-model solution: No float and no display inline
body {
font-size: 1.06em;
width: 100%;
margin: auto;
padding: 0px;
}
.line {
position: relative;
width: 100%;
height: auto;
padding: 1em 0 1em 0;
margin: 0 0 1.5em 0;
}
.speaker {
position: absolute;
width: 16%;
height: 100%;
text-transform: uppercase;
font-weight: 600;
}
.dialog {
position: absolute;
width: 80%;
height: 100%;
margin-left: 20%;
}
Known exceptions to solution:
Reading system testing:
Accessibility advantages:
Accessibility disadvantages:
Mobile compatibility advantages:
Mobile compatibility disadvantages:
|
|
Proposed Solution: Use a HTML <body>
<div class="line">
<div class="speaker" aria-label="speaker">Hansan</div>
<div class="dialog">Baba, I need to talk to you.</div>
</div>
<div class="line">
<div class="speaker" aria-label="speaker">Baba</div>
<div class="dialog">Isn't that what we are doing right now?</div>
</div>
</body>CSS body {
font-size: 1.06em;
line-height: 1.5;
max-width: 711px;
margin: auto;
padding: 10px; }
div.speaker {
width: 15%;
min-width: 100px;
display: inline-block;
margin-top: .5em;
margin-right: 1em;
text-transform: uppercase;
font-weight: 600;
float: left;
}
div.dialog {
display: inline-block;
width: 65%;
margin-top: .5em;
min-width: 400px;
}
div.line {
display: block;
margin-top: 1em;
}Known exceptions to solution: Kindle may force justify lines or experience issues with float. Reading system testing: Accessibility advantages: Accessibility disadvantages: Mobile compatibility advantages: Mobile compatibility disadvantages: |
|
Note the HTML spec has a section on marking up conversations: https://html.spec.whatwg.org/multipage/semantics-other.html#conversations |
|
I've made an EPUB that includes some of the example code above and put it in this repo at https://github.com/w3c/publ-cg/tree/master/best-practices/dialogue-best-practices-test We have some complications:
|
|
Some A11Y tests on @dauwhe's EPUB with NVDA and VoiceOver (VO). NVDA / W10 / Readium (Chrome extension) content_001.xhtml <div class="line">
<div class="speaker" aria-label="speaker">Hansan</div>
<div class="dialog">Baba, I need to talk to you.</div>
</div>
content_003.xhtml <p><span class="speaker" aria-label="speaker">Hansan</span> Baba, I need to talk to you.</p>
|
|
Baba(space)then dot. [ . or : ]
class=“dialog">(space)Isn’t…..
VO - TTS: Baba (pause) Isn’t that…..
N. Erhan Uzumcu
Art Director and EPUB Designer
… On Feb 22, 2019, at 2:01 PM, Ludovic Oger ***@***.***> wrote:
Some tests on @dauwhe <https://github.com/dauwhe>'s EPUB with NVDA and VoiceOver (VO).
NVDA / W10 / Readium (Chrome extension)
VO / iOS / Books+Lisa (same results for both)
Screen readers + OS up to date.
content_001.xhtml
<div class="line">
<div class="speaker" aria-label="speaker">Hansan</div>
<div class="dialog">Baba, I need to talk to you.</div>
</div>
NVDA
TTS: 'Hansan (pause) Baba, ...'
Braille: 'Hansan' (line feed) 'Baba, ...'
VO
TTS: 'Hansan Baba, ...'
Braille: '(caps start)HANSANB(caps stop)aba, ...' (yes, HANSANBaba)
Note: the braille codifications have different ways to indicate caps but the vast majority use a markup system. e.g.: UEB <http://www.pathstoliteracy.org/strategies/ueb-lesson-8-capitalization-used-ueb>
content_003.xhtml
<p><span class="speaker" aria-label="speaker">Hansan</span> Baba, I need to talk to you.</p>
NVDA and VO
TTS: 'Hansan Baba, ...'
Braille: 'Hansan Baba, ...'
aria-label is ignored by both VO and NVDA on div or span.
Hack: With Chrome on Windows and Webkit on iOS, NVDA and VO need the fake role="text" on div and span to read the aria-label that will override the content. On iOS, this hack don't work with Books. Strangely, Books is the worst reading app to use with VoiceOver... lot of bugs... and it gets worser with every version of iOS :/
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub <#70 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGmy-tD6kJCFgHPcNvka1JaADc50akn3ks5vP84bgaJpZM4ZGeDn>.
|
|
This don't work: <style>
div.speaker span::after {
content: ": ";
color: transparent;
font-size: 0;
}
</style>
<div class="line">
<div class="speaker"><span>Hansan</span></div>
</div>This do the trick: <style>
div.speaker span {
color: transparent;
font-size: 0;
}
</style>
<div class="line">
<div class="speaker">Hansan<span>: </span></div>
</div>TTS: 'Hansan (pause) Baba, ...' |
Issue source: #eprdctn, https://twitter.com/LauraB7/status/1029371190274605056
Needed: Test HTML author - remember to include outliers, ie long names
Alt text for image from Tweet: Screenshot of dialogue from play. Left side has the name of the character speaking in a right aligned column and is followed by a significant space and then their dialogue in a new right aligned column.
The text was updated successfully, but these errors were encountered: