☰

如何在 Word 中使用自定义文本框包装每个段落？

tag-icon • tag-icon microsoft-word chat typography facebook-chat graphics-editing
如何在 Word 中使用自定义文本框包装每个段落？

我曾经有过一次简单的聊天对话，需要以类似于 Messenger 中的设计方式显示它们。由于这是一次长时间的对话，我需要一种方法来一次性完成。我知道这可能无法全部实现，所以我只需要尽可能地模仿它。

  • 左对齐灰色气泡（103、184、104），带有黑色文字；
    右对齐绿色气泡（241、240、240），带有白色文字
  • 气泡仅在一段话后消失（相当于聊天时按回车键）。多行的长消息将保存在一个气泡中。
  • 左右边缘均为半圆
  • 相同颜色气泡之间的边距较小。奖励：不同颜色气泡之间的边距较大。


在此处输入图片描述

供参考：哪些文字处理工具可以处理复杂的文本框？平面设计专业
如何让气泡中的每一行都像聊天对话一样？在 TeX 中

答案1

正如我在评论中提到的，HTML/CSS 是一种比 Word 更好、更简单的方法。您可以通过一些非常基本的 HTML 和一些 CSS 规则获得您想要的结果（包括一个气泡与另一个相同颜色的气泡相交处的略微圆润的右上角和/或右下角），而不是插入一堆 Word 形状。主要是为了满足我自己的好奇心，我想出了以下示例。

通过 HTML/CSS 实现聊天气泡

您可以使用查找/替换来完成将聊天记录的原始文本转换为 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 文件作为记录，并按照HTML 5.1 标准第 4.13.4 节（“对话”）。我还添加了一些<div>元素来分隔每个发言者的贡献块，包括一个自定义data-属性来标识两个发言者（a 和 b，而不是 Karen 和 Juan，以便重新使用 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 中可能看起来非常像素化，具体取决于我为气泡使用的颜色。

相关内容