Monday, August 18, 2014

CSS Speech Bubbles

I'd like to take a moment to talk about my CSS speech bubbles. My comic uses CSS rules for making <p> tags render as speech bubbles for the frogs. If you view the page source, you'll see that there are no tables or images involved - just pure CSS.

There are many examples out there on the Internet about how to achieve this effect. I based mine on this one: Bubbler - CSS Speech Bubble Generator. Of all the examples I saw, I just like this one the best.

There was one minor issue I came across though. The frogs are in different places in each cell, but because the bubble stems are positioned using the CSS psuedo-elements::before and ::after, the values that determine the stem location cannot be set via JavaScript.

I decided to solve this issue by removing the stem position from the .bubble::before and .bubble::after classes in the CSS, and creating another set of classes just for the stem positions.

I called these new classes bubble25, bubble50, and bubble75. You can probably guess that the number represents the percentage used for the left attribute in the stem position.

So now, if I want to create a speech bubble with the stem on the right side (75% of the bubble width) I create a tag like this:

<p class="bubble bubble75">here is some content for the bubble</p>

While I can't position the stems at every possible position this way, having the 3 different options has proven sufficient so far. This is a good example of a design trade-off. I could create a hundred different classes and never use 90% of them, or I could create just 3 and get a good-enough position 99% of the time.

Here's a snippet of my CSS that shows more clearly what I'm talking about.