As I mentioned in a comment, HTML/CSS is a better and much easier way to do this than Word. You can get just the result you want (including slightly rounded top-right and/or bottom-right corners where one bubble meets another of the same color) through some very basic HTML and just a couple of CSS rules, as opposed to inserting a bunch of Word shapes. Mostly to satisfy my own curiosity, I came up with the following example.
You can likely use find/replace to do much of the work of transforming the raw text of the chat transcript into HTML. Plus, if you'll have other such transcripts to deal with in the future, you can create the CSS once, as a separate .css file, and then reuse it as many times as you need. Then, all you'll have to do is transform the transcripts into HTML. So even lengthy transcripts need not require that much overall effort.
However, the usefulness of this approach depends somewhat on the final format that you require for your document.
- If you'll turn the Word file for the chat transcript into a PDF for distribution, this solution is a direct replacement, because you can also turn the rendered HTML page into a PDF.
- Even if the final document must include both the chat transcript and other content that's written in Word, you can likely still use this approach for the former and then combine the various PDFs by using a tool that does that sort of thing.
- If you'll distribute the document as a Word file, but your users don't need to be able to edit the chat text, you can simply include the HTML output as a PDF or graphic.
- Unfortunately, if you'll distribute the document as a Word file, and your users need to be able to edit the chat text, this approach is no good.
Here's what I did. Some aspects of it can no doubt be refined somewhat.
I started with a chat transcript that begins like this, and that includes the names of the two speakers and timestamps. (The CSS will eventually hide that info, so you might decide to omit it entirely.)
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.
I created an .html file for the transcript, marking up the various paragraphs, the timestamps, and the names of the speakers as recommended in section 4.13.4 ('Conversations') of the HTML 5.1 standard. I also added some <div> elements to separate the blocks of contributions from each speaker, including a custom data- attribute to identify the two speakers (a and b, rather than Karen and Juan, with a view to reusing the CSS for additional transcripts).
<!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>
Finally, I created these 8 style rules. I just put them directly in my HTML document (in a <style> element inside the <head> element); but, as I said earlier, you can also create a separate, reusable .css file.
[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; }
(The last rule hides the timestamps and the names of the speakers. If you've omitted this information from your transcript, you can omit the final CSS rule.)
That's it. The output is shown above. That graphic was captured in Safari, but the result was the same in all the other browsers that I tried: Firefox, Microsoft Edge, Internet Explorer, and even Opera and Vivaldi. Note, however, that some of the rounded corners could look quite pixelated in Firefox and Edge, depending on the colors that I used for the bubbles.
