Jump to content
  • 0

Текст диалога в HTML

Pinguin

Asked by Pinguin,

 Share

Question

Pinguin Explorer

Pinguin

Posted
Posted

Есть необходимость оформить текст диалога между несколькими собеседниками. В настоящее время он сделан у меня так:

<table width="100%" border="0" cellspacing="4">
  <tr>
	<td width="15%">Собеседник 1:</td>
	<td width="85%">– Реплика 1.</td>
  </tr>
  <tr>
	<td>Собеседник 2:</td>
	<td>– Реплика 2.</td>
  </tr>
  <tr>
	<td>Собеседник 3:</td>
	<td>– Реплика 3.</td>
  </tr>
</table>

Выглядит как надо, но код несколько громоздкий. Особенно когда диалог очень большой.

В HTML 5 появился элемент dialog, с которым это выглядит уже компактнее:

<dialog>
<dt>Собеседник 1:
<dd>– Реплика 1.
<dt>Собеседник 2:
<dd>– Реплика 2.
<dt>Собеседник 3:
<dd>– Реплика 3.
</dialog>

Но тут есть одна проблемка - реплики начинаются со следующей строки, и никак иначе, а я хочу на той же, где и Собеседник.

Существуют ли ещё какие-нибудь красивые варианты?

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
Pinguin Explorer

Pinguin

Posted
  • Author
Posted

Была ещё мысль немного оптимизировать код путём присвоения первой колонке стиля для имени собеседника, через тэг <col>. Один раз на всю таблицу.

<col width="15%" style="Name">

Да что-то не хочет он понимать стили, у него ограниченные возможности.

Link to comment
Share on other sites
  • 0
Pinguin Explorer

Pinguin

Posted
  • Author
Posted (edited)
Это как? По моему вы что-то не понимаете...

Пардон, я ошибся. Хотел написать

<col width="15%" class="Name">

Пытался потом стиль описать прямо в тэге <col> и забыл исправить. Но это тоже не работает, так что без разницы.

Edited by Pinguin
Link to comment
Share on other sites
  • 0
Нет Explorer

Нет

Posted
Posted (edited)

Pinguin, в HTML4 (и XHTML) есть такой элемент, как список определений (definition list). Предназначен в том числе и для оформления цитат. По умолчанию элементы «dt» и «dd» являются блочными (display: block), поэтому они отображаются в две строки друг под другом. Чтобы они отображались в одну строку, их нужно сделать строковыми (display: inline), или строково-блочными (display: inline-block), в зависимости от конкретной ситуации.

<dl>
  <dt>Собеседник 1:</dt>
  <dd>– Реплика 1.</dd>
  <dt>Собеседник 2:</dt>
  <dd>– Реплика 2.</dd>
  <dt>Собеседник 3:</dt>
  <dd>– Реплика 3.</dd>
</dl>

Edited by Нет
Link to comment
Share on other sites
  • 0
Pinguin Explorer

Pinguin

Posted
  • Author
Posted (edited)

Но в этом случае весь блок выстраивается в одну строку, и приходится вставлять перевод строки или абзаца - компактности это не добавляет. Кроме того, для dd здесь нужно задавать position, в то время как отступ первой строки уезжает по одному ему известному принципу. В общем, мне так и не удалось добиться нормального табличного вида.

Edited by Pinguin
Link to comment
Share on other sites
  • 0
Нет Explorer

Нет

Posted
Posted

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

HTML:

<dl>
  <dt>Собеседник 1:</dt>
  <dd>– Реплика 1.</dd>
  <dt>Собеседник 2:</dt>
  <dd>– Реплика 2.</dd>
  <dt>Собеседник 3:</dt>
  <dd>– Реплика 3.</dd>
</dl>

CSS:

dt, dd {
  display: inline-block;
  margin-left: 10px;
}

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Насчет применимости DL для диалогов — хотя это и разрешено в HTML 4/XHTML 1, но я согласен с этими аргументами (в том, что касается именно диалогов, дальше автор явно перегибает палку).

Просто инлайн-блока не хватит, особенно если реплики должны быть выравнены ровным столбцом. Как вариант, можно пример из текущего HTML5 можно оформить как-то так:

<!doctype html>
<style>
time { display: none; }
p { margin-left: 15%; }
p b { float: left; width: 15%; margin-left: -15%; }
</style>
<p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
<p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<p> <time>14:23</time> <b>egof</b> it's unarguably
<p> <time>14:23</time> <i>* kaj blinks</i>
<p> <time>14:24</time> <b>kaj</b> you are not helping your case

Или, если всё-таки табличкой — можно в нормальных браузерах задействовать td:first-child, а в старых IE <col> (там он позволяет больше, чем по стандарту)...

Link to comment
Share on other sites
  • 0
Pinguin Explorer

Pinguin

Posted
  • Author
Posted
Pinguin, возможно, я не понимаю вашей задачи, потому что не вижу, в чём проблема. Никаких дополнительных элементов, позиционирования и таблиц для того, чтобы построить диалог, не нужно.

То, что вы написали, отображается в одну строку - всё-всё в одну строку. Что, конечно же, никак не отвечает поставленной задаче. Если что - у меня Opera 10.63.

Link to comment
Share on other sites
  • 0
Нет Explorer

Нет

Posted
Posted (edited)

Pinguin,

HTML:

<dl>
  <dt>Собеседник 1:</dt>
  <dd>– Реплика 1.</dd>
  <dt>Собеседник 2:</dt>
  <dd>– Реплика 2.</dd>
  <dt>Собеседник 3:</dt>
  <dd>– Реплика 3.</dd>
</dl>

CSS:

dt {
  display: inline;
  line-height: 150%;
}

dd {
  margin: -20px 0 0 25%;
}

Edited by Нет
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept