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.
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
Best Answer
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.
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.)
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 customdata-
attribute to identify the two speakers (a and b, rather than Karen and Juan, with a view to reusing the CSS for additional transcripts).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.(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.