Как я упоминал в комментарии, HTML/CSS - лучший и гораздо более простой способ сделать это, чем Word. Вы можете получить только тот результат, который вам нужен (включая слегка закругленные верхние правые и / или нижние правые углы, где один пузырь встречается с другим одного цвета) с помощью некоторого очень простого HTML и нескольких правил CSS, в отличие от вставки куча слов фигур. В основном, чтобы удовлетворить свое любопытство, я придумал следующий пример.
Вы, вероятно, можете использовать поиск / замену, чтобы выполнить большую часть работы по преобразованию необработанного текста стенограммы чата в HTML. Кроме того, если в будущем у вас будут другие подобные стенограммы, вы можете создать CSS один раз, в виде отдельного файла .css, а затем использовать его столько раз, сколько вам нужно. Затем все, что вам нужно сделать, это преобразовать транскрипты в HTML. Таким образом, даже длительные стенограммы не требуют таких больших общих усилий.
Однако полезность этого подхода зависит в некоторой степени от окончательного формата, который вам требуется для вашего документа.
- Если вы превратите файл Word для стенограммы чата в PDF для распространения, это решение является прямой заменой, поскольку вы также можете превратить визуализированную HTML-страницу в PDF.
- Даже если окончательный документ должен включать как стенограмму чата, так и другое содержимое, написанное в Word, вы, вероятно, все равно можете использовать этот подход для первого, а затем объединить различные PDF-файлы с помощью инструмента, который делает подобные вещи.
- Если вы будете распространять документ в виде файла Word, но пользователям не нужно будет редактировать текст чата, вы можете просто включить вывод HTML в виде PDF или графического изображения.
- К сожалению, если вы будете распространять документ в виде файла Word, и ваши пользователи должны иметь возможность редактировать текст чата, такой подход не годится.
Вот что я сделал. Некоторые аспекты этого, без сомнения, могут быть несколько улучшены.
Я начал со стенограммы чата, которая начинается примерно так, и включает имена двух докладчиков и метки времени. (CSS в конечном итоге скроет эту информацию, поэтому вы можете полностью ее опустить.)
12:13:14 Karen Lorem ipsum dolor sit amet, consectetur adipiscing elit.
12:13:20 Karen Integer nec odio.
12:13:25 Karen Praesent libero.
12:13:35 Karen Sed cursus ante dapibus diam.
12:13:59 Juan Sed nisi.
12:14:10 Juan Nulla quis sem at nibh elementum imperdiet.
Я создал файл .html для стенограммы, помечая различные абзацы, временные метки и имена выступающих, как рекомендовано в разделе 4.13.4 («Беседы») стандарта HTML 5.1. Я также добавил несколько элементов <div> чтобы отделить блоки вклада от каждого докладчика, в том числе пользовательский атрибут data- для идентификации двух докладчиков (а и b, а не Карен и Хуана) с целью повторного использования CSS для дополнительных расшифровок.).
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Chat</title>
</head>
<body>
<main>
<div data-person='a'>
<p><time>12:13:14</time> <b>Karen</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><time>12:13:20</time> <b>Karen</b> Integer nec odio.</p>
<p><time>12:13:25</time> <b>Karen</b> Praesent libero.</p>
<p><time>12:13:35</time> <b>Karen</b> Sed cursus ante dapibus diam.</p>
</div>
<div data-person='b'>
<p><time>12:13:59</time> <b>Juan</b> Sed nisi.</p>
<p><time>12:14:10</time> <b>Juan</b> Nulla quis sem at nibh elementum imperdiet.</p>
</div>
</main>
</body>
</html>
Наконец, я создал эти 8 правил стиля. Я просто помещаю их прямо в мой HTML-документ (в элемент <style> внутри элемента <head> ); но, как я уже говорил ранее, вы также можете создать отдельный, повторно используемый файл .css.
[data-person] { border-width:0; margin:0; padding:0; width:50%; }
[data-person='b'] { position:relative; right:-50%; }
[data-person] > p { margin:0; border:1px solid white; border-radius:1.5em 0.5em 0.5em 1.5em; padding:0.5em 1em; width:auto; max-width:100%; min-width:auto; float:right; clear:both; }
[data-person='a'] > p { background:rgb(241,240,240); color:rgb(0,0,0); }
[data-person='b'] > p { background:rgb(103,184,104); color:rgb(255,255,255); }
[data-person] > p:last-of-type { border-bottom-right-radius:1.5em; }
[data-person] > p:first-of-type { border-top-right-radius:1.5em; margin-top:2em; }
[data-person] > p > time:first-of-type, [data-person] > p > b:first-of-type { display:block;width:0;height:0;overflow:hidden; }
(Последнее правило скрывает временные метки и имена выступающих. Если вы исключили эту информацию из своего стенограммы, вы можете опустить окончательное правило CSS.)
Вот и все. Вывод показан выше. Эта графика была захвачена в Safari, но результат был одинаковым во всех других браузерах, которые я пробовал: Firefox, Microsoft Edge, Internet Explorer и даже Opera и Vivaldi. Обратите внимание, однако, что некоторые из закругленных углов могут выглядеть довольно неровными в Firefox и Edge, в зависимости от цветов, которые я использовал для пузырьков.
