Speech bubbles

Chat-style bubbles for notes, replies and webmentions.

Speech bubbles come in two directions (--from-them floats left; --from-me floats right) and can be rendered with or without the speaker's avatar. The --no-photo modifier collapses the grid column that would otherwise hold the photo.

Each top-level <p>, <ul>, or <ol> in the source becomes its own bubble. The speechBubbleify filter adds class="speech-bubble" to each one as it passes through the layout, so a multi-paragraph note renders as a stack of separate bubbles rather than one bubble holding several paragraphs.

With a photo — the avatar anchors to the bottom of the column.

Each paragraph renders as its own bubble, stacked vertically.

  • Lists become a single bubble…
  • …with their items laid out inside.

Right-aligned, with a photo on the other side.

A second paragraph becomes a second bubble.

  1. Ordered lists work the same way.
  2. They float opposite to paragraphs from me.

Without a photo — the bubbles take the full width of the column.

A second bubble sits below the first.

Same, but from me.

With a second bubble to show the stack.

In markdown-driven posts (notes, microblogs, about pages), the layout pipes content through the speechBubbleify Liquid filter, so you write plain markdown and the bubbles appear automatically:

<section class="speech-bubbles--content e-content p-name">
  {{ content | speechBubbleify }}
</section>

For hand-written HTML, apply class="speech-bubble" directly to each top-level element:

<section class="speech-bubbles speech-bubbles--from-them">
  <aside class="speech-bubbles--author">Them</aside>
  <section class="speech-bubbles--content">
    <p class="speech-bubble">First bubble.</p>
    <p class="speech-bubble">Second bubble.</p>
    <ul class="speech-bubble">
      <li>A list becomes one bubble.</li>
    </ul>
  </section>
  <section class="speech-bubbles--speaker">
    <img class="u-photo" alt="" src="/path/to/avatar.svg">
  </section>
</section>

<!-- Add .speech-bubbles--no-photo to omit the avatar column -->