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

Ответ 1

Я второй ересь: -)

Всегда полезно рассматривать CSS, прежде чем прибегать к таблицам, но часто таблицы лучше всего подходят. Похоже, в этом случае.

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

Еще одна вещь - я предполагаю, что сначала вы будете хранить необработанные данные в каком-то другом формате - возможно, базу данных или xml или какой-либо другой структурированный текст?

В любом случае получение его в формате xml и преобразование его в html с помощью xslt может быть довольно освобождающим, когда дело доходит до игры с этим материалом.

Ответ 2

Более правильным (семантически) и короче будет использование списков определений:

<dl>
   <dt>Jeff</dt>
   <dd>This sure is a nice website we've got now.</dd>
</dl>


dl {
  overflow:hidden;
}

dl dt {
  float:left;
  width:30%;
}

dl dd {
  float:left;
  width:70%;
}

Ответ 3

Я бы сказал

<dialog>
  <dt>Jeff
  <dd>This sure is a nice website we've got now.
  <dt>Joel
  <dd>It certainly is. By the way, working at FogCreek rocks.
  <dt>Jeff
  <dd>Of course it does. Have you played Rock Band yet? It a lot of fun.
</dialog>

как определено в HTML5.

Конечно, вам понадобится <script>document.createElement('dialog');</script>, чтобы заставить IE делать что-то разумное и dialog { display:block; } в вашем CSS, чтобы заставить его работать полностью.

Ответ 4

Моим любимым примером маркировки чего-то подобного является одно из соединений Tantek XHTML http://tantek.com/presentations/2005/03/elementsofxhtml/ (проверьте бит разговора)

В итоге это выглядит так:

<ol>
  <li><cite>Jeff</cite>
    <blockquote><p>This sure is a nice website we've got now.</p><blockquote>
  </li>
  <li><cite>Joel</cite>
    <blockquote><p>It certainly is. By the way, working at FogCreek rocks.</p></blockquote>
  </li>
  ...etc...
</ol>

Не уверен, как вы помечаете направления на сцене и т.д. Может быть, вы создадите новый микроформат:)

Также эта разметка имеет некоторые идеальные крючки CSS с дискретным LInes в отличие от списка определений.

Ответ 5

IMO, что фактически является табличными данными. Первый столбец - динамик, второй - текст.

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

<div class="play">
  <div class="line">
    <div class="speaker">Jeff</div>
    <div class="text">This sure is a nice website we've got now. </div>
  </div>
  <div class="line">
    <div class="speaker">Joel</div>
    <div class="text">It certainly is. By the way, working at FogCreek rocks.</div>
  </div>
</div>

Затем вы определяете, как это происходит с соответствующим CSS.

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

Ответ 6

Я бы использовал заголовки и абзацы.

<div class="play">
    <h2>Jeff</h2>        
    <p>This sure is a nice website we've got now.</p>

    <h2>Joel</h2>
    <p>It certainly is. By the way, working at FogCreek rocks.</p>

    <h2>Jeff</h2>        
    <p>Of course it does. Have you played Rock Band yet? It's<br />
    a lot of fun.</p>
</div>

В следующих стилях он будет размещен так, как вы его представили:

.play h2 {
    float:left; 
    clear:left;
    width:100px;
    margin:0;
}
.play p {
    margin-left:100px;
}

Ответ 7

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

Итак, мое предложение - написать пьесу в чем-то, что может лучше представлять ваши мысли (не обязательно XML), а затем преобразовать их в HTML. Для моих собственных работ я использую рекурсивный синтаксический анализатор XML, который может выпасть из разбора XML для определенных элементов:

<content><<Hello,>> Forne smiled and thought: <<T Idiot.>></content>

Мой анализатор вызовет пользовательский парсер для анализа содержимого <content>. В моем случае он создаст промежуточное дерево XML:

<content><say>Hello,</say> <char>Forne</char> smiled and thought: <think>Idiot.</think></content>

Это дерево затем преобразуется в HTML, TeX, PDF, что угодно.

[EDIT] Моя стратегия создания компактного языка работает следующим образом: я начинаю с XML. Через некоторое время я смотрю на XML и пытаюсь увидеть шаблоны. Затем я думаю, что я мог бы выразить эти шаблоны более компактным образом: 1.) как XML, 2.) как XML-текст (с пользовательской разметкой) и 3.) как нечто совсем другое. Когда меня поражает идея, я пишу парсер для нового формата.

Откровенно говоря, писать парсеры, которые могут превратить что-то в XML для автоматической обработки фона, сегодня являются второстепенной задачей.

Ответ 8

Таблицы - это путь.

Что-нибудь еще, как возиться с <div> s и css или XSLT, просто изобретает <table> но с синтаксисом c ** p.

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

Ответ 9

Вы не получите окончательного ответа на этот вопрос, поскольку HTML имеет много пробелов, один из которых - это - есть некоторые очень прочные статьи, размещенные вокруг Интернета о его предмете, и хорошее место для начала было бы статья Брюса Лоусона с 2006 года.

Учитывая, что нет ответа на этот вопрос, самое лучшее, что мы можем сделать, это посмотреть, какие элементы доступны для нас и сделать наши собственные компромиссы на основе нашей (и сообщества) интерпретации рекомендаций.

Мне лично нравится маршрут cite/blockquote и список данных. Я знаю, что в списках данных нет никакой семантической разметки, но я действительно считаю, что целью списков данных является не перечисление определений данных исключительно в словаре, а для объединения данных, где ul и ol не могут.

Я потратил много времени на размышления о семантике, и одна вещь, которую я (как и большинство других в этой области), уверен, что, глядя на все вопросы разметки, это то, что таблицы не являются ответом на 99,9% вопросы разметки (если это не табличные данные, где вы можете использовать th, caption, тогда таблицы должны быть действительно удалены из вашего инвентаря). Тем не менее, я бы также сказал, что исключительно использование div также, вероятно, не является правильным ответом.

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

Ответ 10

Я бы просто использовал div-элементы в этом случае с хорошими классами, описывающими домен. Вы могли бы обсуждать и использовать всевозможные элементы HTML, которые дают лучший смысловой смысл намерения, но, например, в случае элемента диалога, который не предназначен для написания диалогов между символами в игре, однако он предназначен чтобы предоставить пользователю диалоговое окно для взаимодействия. Но тот факт, что вы можете изменить и стилизовать этот элемент в ваших сердцах в 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 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 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 a lot of fun.</div>
</div>

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

Ответ 11

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

<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 a lot of fun.</p>
</div>

</div>

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

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