search

w3c / publ-cg

EPUB 3 Community Group Repository
Other
44 stars 16 forks source link

Best way to code play dialogue format in EPUB? #70

Open RachelComerford opened 5 years ago

RachelComerford commented 5 years ago

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.

teytag commented 5 years ago

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:

RachelComerford commented 5 years ago

Proposed Solution: Use a <div> with display inline blocks https://codepen.io/bgedit/pen/MBRzoJ

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:

dauwhe commented 5 years ago

Note the HTML spec has a section on marking up conversations: https://html.spec.whatwg.org/multipage/semantics-other.html#conversations

dauwhe commented 5 years ago

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:

  1. There are many ways to style dialogue, all of them valid.

  2. Dialogue varies greatly in structure, from Shakespeare plays in blank verse to Dog 911 on Twitter. Opinions differ on markup.

garconvacher commented 5 years ago

Some A11Y tests on @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>

content_003.xhtml

<p><span class="speaker" aria-label="speaker">Hansan</span> Baba, I need to talk to you.</p>
teytag commented 5 years ago

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 notifications@github.com 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

Hansan
Baba, I need to talk to you.

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

Hansan Baba, I need to talk to you.

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 https://github.com/w3c/publ-cg/issues/70#issuecomment-466359593, or mute the thread https://github.com/notifications/unsubscribe-auth/AGmy-tD6kJCFgHPcNvka1JaADc50akn3ks5vP84bgaJpZM4ZGeDn.

garconvacher commented 5 years ago

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, ...' Braille: 'HANSAN: Baba, ...'