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

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

  • выровненные по левому краю серые пузырьки (103, 184, 104)с черным текстом;


    По правому краю зеленые пузыри (241, 240, 240) с белым текстом
  • пузыри ломаются только после абзаца (эквивалентно нажатию enter в чате). Длинное сообщение с несколькими строками будет храниться в одном пузыре.
  • левый и правый края полукруга
  • поля между тем же цветным пузырем невелики. Бонус: поля между различными цветными пузырями большие.


enter image description here

FYI:С какими инструментами обработки текстов можно работать усложнить текстовый бокс? в графическом дизайне

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

28
задан Ooker
17.04.2023 4:20 Количество просмотров материала 3200
Распечатать страницу

2 ответа

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

Chat bubbles via HTML/CSS

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

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

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

вот что я сделал. Некоторые его аспекты, несомненно, могут быть несколько уточнены.

  1. Я начал с транскрипта чата, который начинается вот так, и который включает имена двух динамиков и метки времени. (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.

  2. Я создал .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>

  3. наконец, я создал эти 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, в зависимости от цветов, которые я использовал для пузырьков.

1
отвечен cnread 2023-04-18 12:08

клик ленты > вставить > формы, и нарисуйте простой прямоугольник с ровными краями.

enter image description here

дважды щелкните на нем, введите текст, а затем изменить фон и границы, как вы хотите, а также выравнивание текста (по правой стороне).

Теперь создайте другую фигуру, как показано здесь:

enter image description here

изменить цвета этого сформируйте и отрегулируйте высоту для того чтобы сделать ее идентичным к первой форме. Затем создайте его копию. Итак, вот что мы имеем сейчас:

enter image description here

а теперь выровняйте их в одну строку:

enter image description here

теперь создадим еще один прямоугольник:

enter image description here

Chage это цвета, а затем повернуть его: щелкните правой кнопкой мыши на нем, и выберите Дополнительные Параметры Разметки > в размере > вращение: 90.

enter image description here

теперь у вас есть:

enter image description here

вам нужно сделать его более небольшим и совместить с вашей "совмещенной" формой. Вот что я имею в виду:

enter image description here

enter image description here

Далее, вам нужно нарисовать еще один прямоугольник, широкий и низкий, чтобы имитировать белая линия между пузырьками. Результат:

enter image description here

вот и все. Во время работы вам могут пригодиться следующие функции:

  • выберите несколько фигур (с Ctrl ключ), щелкните правой кнопкой мыши на них, и выберите "группа"
  • выберите одну форму, щелкните правой кнопкой мыши на нем и выберите "на передний план" или "принести обратно".

Также обратите внимание, что Word не является инструментом для такой работы. Да, вы можете это сделать, но вы должны не.

2
отвечен john c. j. 2023-04-18 14:25

Постоянная ссылка на данную страницу: [ Скопировать ссылку | Сгенерировать QR-код ]

Ваш ответ

Опубликуйте как Гость или авторизуйтесь

Имя
Мы используем cookie. Это позволяет нам анализировать взаимодействие посетителей с сайтом и делать его лучше. Продолжая пользоваться сайтом, вы соглашаетесь с использованием файлов cookie. Политика конфиденциальности
Согласен
Вверх