Как я упоминал в комментарии, 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-атрибут для идентификации двух докладчиков (a и 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, в зависимости от цветов, которые я использовал для пузырьков.
