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

Какой лучший способ представить сценарий сценария в 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 ]

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

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

<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%;
}
12 голосов
/ 14 января 2009

Я бы сказал 

<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's a lot of fun.
</dialog>

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

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

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

Мой любимый пример разметки чего-то подобного - одно из 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 с дискретными строками в отличие от списка определений.

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

я вторая ересь: -)

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

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

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

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

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

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

Поэтому я предлагаю написать пьесу, которая лучше всего отражает ваши мысли (не обязательно 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 и т. Д.

[РЕДАКТИРОВАТЬ] Моя стратегия создания компактного языка работает следующим образом: я начинаю с XML. Через некоторое время я смотрю на XML и пытаюсь увидеть шаблоны. Затем я думаю, как я мог бы выразить эти шаблоны более компактным способом: 1) как XML, 2) как текст XML (с пользовательской разметкой) и 3) как что-то еще полностью Когда идея приходит мне в голову, я пишу парсер для нового формата.

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

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

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

<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;
}
4 голосов
/ 14 января 2009

ИМО, что на самом деле является табличными данными. Первый столбец - это динамик, второй - текст.

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

<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.

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

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

Что-то еще, например, возиться с

s и css или XSLT, просто заново изобретает
1 голос
/ 04 сентября 2018

Рекомендация HTML 5.2 для разговоров

авторам рекомендуется отмечать разговоры, используя p элементы и знаки препинания. Авторам, которым необходимо пометить говорящего в целях стилизации, рекомендуется использовать span или b. Абзацы с текстом, заключенным в элемент i, можно использовать для разметки направлений сцены.

Пример разговора с минимальной разметкой 

<article class=stage-script>
  <h1>Water Cooler Talk at FogCreek</h1>

  <p><b>Jeff</b> This sure is a nice website we've got now.

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

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

  <p><i>Joel and Jeff walk into the sunset</i>
</article>

CSS для разговора 

.stage-script > p > b:first-child {
    display: inline-block;
    width: 5em;
}
.stage-script > p > b:first-child::after {
    content: ':';
}
1 голос
/ 15 января 2009

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

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

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

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

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

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