0

I've had a plain chat conversation and need display them similarly to how they are designed in Messenger. Since this is a long conversation, I need a method to do it at once. I know this might be impossible to have all, so I just need to mimic it as close as possible.

  • Left-aligned gray bubbles (103, 184, 104) with black text;
    Right-aligned green bubbles (241, 240, 240) with white text
  • Bubbles only break after a paragraph (equivalent to an enter press when chatting). Long message with multiple lines will be kept in one bubble.
  • Left and right edges are half circle
  • Margins between same color bubble is small. Bonus: margins between different color bubble is large.


enter image description here

FYI: What word processing tools that can work with complicate text boxing? in Graphic Design
How to make every line in a bubble like chat conversations? in TeX

  • 1
    Did you try adapting the script that's included in the answer to the question in the first article that you've linked to? I agree with the author of that answer: HTML/CSS is by far the easiest way to do what you want – and will almost certainly give the best result too. – cnread Dec 8 '17 at 18:14
1

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.

Chat bubbles via HTML/CSS

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.

  1. 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.
    
  2. 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>
    
  3. 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.

2

Click Ribbon > Insert > Shapes, and draw simple rectangle with straight edges.

enter image description here

Double click on it, type some text, and then change background and borders as you wish, as well as text alignment (to the right side).

Now, create another shape, as shown here:

enter image description here

Change colors of this shape and adjust the height to make it identical to the first shape. Then, create a copy of it. So, that's we have now:

enter image description here

And now, align them in one line:

enter image description here

Now create another rectangle:

enter image description here

Chage it colors and then rotate it: right click on it, and select More Layout Options > Size > Rotation: 90.

enter image description here

Now you have:

enter image description here

You need to make it smaller and combine with your "combined" shape. That's what I mean:

enter image description here

enter image description here

Next, you need to draw one another rectangle, wide and low, to simulate white line between bubbles. Result:

enter image description here

That's all. During your work, you may find these features useful:

  • Select multiple shapes (with Ctrl key), right click on them, and choose "Group"
  • Select one shape, right click on it, and select "Bring to Front" or "Bring to Back".

Also, please note, Word is not a tool for such work. Yes, you can do it, but you should not.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.