Как обернуть каждый абзац в пользовательский текстовый блок в Word?

Question 1

У меня был простой чат, и мне нужно отобразить его так же, как они оформлены в Messenger. Поскольку это длинный чат, мне нужен метод, чтобы сделать это одновременно. Я понимаю, что это может быть невозможно сделать полностью, так что мне просто нужно имитировать это как можно ближе.

Слева выровненные серые пузыри (103, 184, 104) с черным текстом;
Справа выровненные зеленые пузыри (241, 240, 240) с белым текстом
Пузыри только прерываются после абзаца (эквивалентно нажатию Enter при переписке). Длинные сообщения с несколькими строками будут сохраняться в одном пузыре.
Левые и правые края — полукруглые
Отступы между пузырями одного цвета маленькие. Бонус: отступы между пузырями разного цвета большие.

^{Кстати: Какие инструменты обработки текста могут работать со сложным текстовым боксингом? в Graphic Design

Как сделать каждую строку в пузыре как в чатах? в TeX}

Question 2

Как я упоминал в комментарии, HTML/CSS — это лучший и гораздо более простой способ сделать это, чем Word. Используя некоторые базовые HTML и всего пару CSS правил, вы можете получить именно тот результат, который хотите (включая слегка закругленные верхний-правый и/или нижний-правый углы там, где один пузырь встречается с другим такого же цвета), в отличие от вставки множества фигур в Word. В основном, чтобы удовлетворить собственное любопытство, я составил следующий пример.

Вы, вероятно, сможете использовать поиск/замену, чтобы выполнить большую часть работы по преобразованию сырого текста стенограммы чата в HTML. Кроме того, если у вас будут и другие такие стенограммы в будущем, вы можете создать CSS один раз в виде отдельного .css файла и затем использовать его столько раз, сколько потребуется. Тогда все, что вам нужно будет сделать, это преобразовать стенограммы в HTML. Таким образом, даже длинные стенограммы не потребуют много усилий.

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

Если вы преобразуете файл Word со стенограммой чата в PDF для распространения, это решение является прямой заменой, поскольку вы также можете преобразовать отображенную HTML-страницу в PDF.
Даже если окончательный документ должен включать как стенограмму чата, так и другой контент, написанный в Word, вы, вероятно, все равно можете использовать этот подход для первого, а затем объединить различные PDF, используя инструмент, предназначенный для этого.
Если вы распространите документ как файл Word, но вашим пользователям не нужно будет редактировать текст чата, вы можете просто включить HTML-вывод как PDF или графику.
К сожалению, если вы распространите документ как файл Word, и вашим пользователям потребуется редактировать текст чата, этот подход не подходит.

Вот что я сделал. Некоторые его аспекты можно, без сомнения, немного улучшить.

Я начал со стенограммы чата, которая выглядит следующим образом и включает имена двух собеседников и временные метки. (CSS в конечном итоге скроет эту информацию, так что вы можете решить полностью ее опустить.)
```
12:13:14 Карен Lorem ipsum dolor sit amet, consectetur adipiscing elit.
12:13:20 Карен Integer nec odio.
12:13:25 Карен Praesent libero.
12:13:35 Карен Sed cursus ante dapibus diam.

12:13:59 Хуан Sed nisi.
12:14:10 Хуан Nulla quis sem at nibh elementum imperdiet.
```
Я создал .html файл для стенограммы, разметив различные абзацы, временные метки и имена собеседников, как рекомендуется в разделе 4.13.4 (‘Conversations’) стандарта HTML 5.1. Я также добавил несколько элементов <div>, чтобы разделить блоки вкладов от каждого собеседника, включая пользовательский атрибут data-, чтобы идентифицировать двух собеседников (a и b, вместо Карен и Хуан, с целью повторного использования CSS для дополнительных стенограмм).
```
<!doctype html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Чат</title>
</head>
<body>
<main>
<div data-person='a'>
<p><time>12:13:14</time> <b>Карен</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><time>12:13:20</time> <b>Карен</b> Integer nec odio.</p>
<p><time>12:13:25</time> <b>Карен</b> Praesent libero.</p>
<p><time>12:13:35</time> <b>Карен</b> Sed cursus ante dapibus diam.</p>
</div>
<div data-person='b'>
<p><time>12:13:59</time> <b>Хуан</b> Sed nisi.</p>
<p><time>12:14:10</time> <b>Хуан</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, в зависимости от используемых цветов для пузырей.

Как обернуть каждый абзац в пользовательский текстовый блок в Word?

Вопрос или проблема

Ответ или решение

Теория

Пример

Применение

Заключение