Какой лучший способ представить сценарий сценария в HTML? - PullRequest
Новая
       22

Какой лучший способ представить сценарий сценария в HTML?

28 голосов
/ 14 января 2009

У меня есть эскиз, который я хочу разместить на своем веб-сайте, и я также собираюсь написать небольшую пьесу в какой-то момент, который я также хотел бы сделать свободно доступным.

Я пытаюсь найти лучший способ представить это в HTML. Мне в основном нужны две колонки - одна для говорящего персонажа, а другая для текста. Каждая речь, очевидно, должна совпадать с оратором. Другими словами, как-то так: 

    Jeff        This sure is a nice website we've got now.

    Joel        It certainly is. By the way, working at FogCreek rocks.

    Jeff        Of course it does. Have you played Rock Band yet? It's
                 a lot of fun.

(ну, это лучше, чем Lorem Ipsum ...)

Я знаю, как я мог бы сделать это с таблицами HTML (с одной строкой таблицы на речь), но это кажется довольно уродливым, и каждый, безусловно, заинтересован в использовании CSS для представления не табличных данных. Я не могу понять, как это действительно учитывает табличные данные - мое использование «строки» и «столбца» ранее было связано с макетом, а не с основными данными.

Итак, есть идеи? Я думаю, что большинство сайтов сценариев, которые я видел (не многие, по общему признанию), либо используют <pre>, как мой пример выше, либо не пытаются сохранить нормальный формат сценария, вместо этого просто префикс каждого абзаца с именем говорящего (См. Пример этого стиля на вики-сайте подкаста.) У меня возникают проблемы с выбором даже тех элементов HTML, которые я должен использовать, чтобы представить это, честно говоря, список определений словаря с говорящим в качестве термина и речью в качестве определения. это, наверное, самое близкое, о чем я думал, но это похоже на насилие.

Ответы [ 12 ]

0 голосов
/ 25 октября 2016

Я бы просто использовал div элементы в этом случае, с хорошими классами, описывающими домен. Вы могли бы спорить об использовании всех видов элементов HTML, которые дают лучшее семантическое значение намерения, но, например, в случае элемента dialog , то есть , а не , предназначенного для При написании диалогов между персонажами в игре, однако, предполагается представить диалоговое окно пользователю для взаимодействия. Но тот факт, что вы можете изменить и стилизовать этот элемент по своему желанию в CSS, изящен - но я бы не рекомендовал это делать.

Причина этого в том, что, если вы не будете осторожны, вы переопределите это поведение и внешний вид для каждого такого элемента. Допустим, это интерактивное приложение для драматургов, вы можете захотеть включить диалоговые окна в дополнение к «диалогу» в пьесе.

Я предлагаю это решение: 

.character{
  display: block;
  float: left;
}

.line{
  margin-bottom: 20pt;
  width: 400px;
  margin-left: 50pt;
}

Со следующим HTML: 

<div class="character">Jeff</div>
<div class="line">This sure is a nice website we've got now.</div>
<div class="character">Joel</div>
<div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class="character">Jeff</div>
<div class="line">Of course it does. Have you played Rock Band yet? 
  <br/>It's a lot of fun.</div>

Запуск JSFiddle: https://jsfiddle.net/quz9cj2f/6/

Теперь вы можете реализовать стандартное форматирование воспроизведения, которое я использовал в этом месте: http://ptfaculty.gordonstate.edu/lking/CPF_play_formatting2.pdf

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.direction:before{
  margin-left: 2.75in;
  content: "(";
}
.direction:after{
  content: ")";
}
.line {
  margin-bottom: .3in;
}

С этим HTML: 

<div class="play">
  <div class="character">Jeff</div>
  <div class="direction">JEFF is enthusiastic!</div>
  <div class="line">This sure is a nice website we've got now.</div>
  <div class="character">Joel</div>
  <div class="direction">Jumping continuously</div>
  <div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

Рабочая JSFiddle: https://jsfiddle.net/quz9cj2f/9/

Или вы можете пойти ва-банк и использовать селекторы атрибутов CSS и создать собственные атрибуты для метаинформации: 

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.line[direction]:before{
  margin-left: 2.75in;
  content: "(" attr(direction) ")";
  display: block;
}

.line {
  margin-bottom: .3in;
}

Теперь вы избавились от лишних элементов и добавили метаинформацию в качестве атрибутов - теперь вы можете довольно легко преобразовать это из какой-то хорошей структуры данных из JSON или XML или других форматов обмена в это: 

<div class="play">
  <div class="character">Jeff</div>
  <div direction="Enthusiastic" class="line">This sure is a nice website we've got now.</div>
  <div class="character">Joel</div>
  <div direction="Shaking his head" class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class="character">Jeff</div>
  <div class="line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

https://jsfiddle.net/quz9cj2f/11/

0 голосов
/ 14 января 2009

Если вы хотите сделать это семантически, я бы использовал метки, что-то вроде: 

<div class="script">
<label for="Jeff1">Jeff<label>
<div id="Jeff1">
  <p>This sure is a nice website we've got now.</p>
</div>

<label for="Joel1">Joel</label>
<div id="Joel1">
  <p>It certainly is.</p>
  <p>By the way, working at FogCreek rocks.</p>
</div>

<label for="Jeff2">Jeff</label>
<div id="Jeff2">
  <p>Of course it does.</p>
  <p>Have you played Rock Band yet? It's a lot of fun.</p>
</div>

</div>

Это довольно неплохо ухудшается, и я думаю, что лейбл немного более подходит для того, что вы пытаетесь сделать. А потом, в твоей таблице стилей, я бы придумал что-то вроде примера Эрана Гальперина CSS.

Другое предложение, которое я хотел бы предложить, если вы серьезно относитесь к этому, - это посмотреть, как пишутся сценарии мертвого дерева, и сделать все возможное, чтобы сохранить их стиль. Это поможет убедиться, что он выглядит знакомым (читай профессионально) вашей аудитории.

Страница:
...