My personal thoughts about “The Force Awakens” are very well mirrored by the discussion on last week’s The Incomparable, Episode 277: Stormtroopers Are People. The panel consists of Jason Snell, Serenity Caldwell, Dan Moren and the hypercritical John Siracusa.

I think that Siracusa’s characterization of the movie (around the 2h45 mark) is especially noteworthy, where he states that he managed to judge the movie for its own merits and not to have unfair expectations.

Three (example) headings: One centered with horizontal lines on either side, One left aligned with only a line on the right and the final one right-aligned with the line on the left. There is some space between the lines and the text.

I read the Webkrauts advent calendar article by Jens Grochtdreis earlier today, it is about headers with lines on the side, quite like in the article image above. Actually exactly like the example above. (There is a similar article by Chris Coyier on CSS-Tricks for English-speaking people out there.)

He presents a solution with one or two pseudo elements and an extra <span> in both cases and has a pretty simple code for it, as well. I wondered if there is an even simpler solution and I believe I have found one that doesn’t need the other <span> and just uses the pseudo elements. One caveat: the solution depends on flexbox, so older browsers are out of look and you might need some prefixes. But yeah, progressive enhancement!

<h2>Heading – oh look, no span!</h2>
h2 {
  display: flex;
  align-items: center;
  color: rebeccapurple;
}

h2::before, h2::after {
  flex: 1;
  height: 3px;
  content: '';
  background-color: currentColor;
}

h2::before { margin-right: 10px; }
h2::after  { margin-left:  10px; }

We define the heading as a flex container, align-items centers the pseudo elements. The ::before and ::after pseudo elements are set to the height that defines the width of the line. Using flex: 1 distributes the pseudo elements evenly, ans as they are before and after the text, they push it to the center. Margins help to have a gap between the text and the lines. To add the left and right variants, these two “modifier classes” (also known as layout classes) can be defined:

.left-aligned::before {
  flex: 0;
  margin-right: 0;
}

.right-aligned::after {
  flex: 0;
  margin-left: 0;
}

Voilà! The effect works perfectly, is scalable and works when you don’t have tight control over the HTML, such as when you get output from a CMS WYSIWYG editor.

You can play with the code in the following codepen:

See the Pen Line-On-Sides Headers with Flexbox by Eric Eggert (@yatil) on CodePen.14519

Addendum

Of course, while writing this article, Gunnar Bittersman had already posted the flexbox approach to the article comments. He knows everything.

But while reading the comments, the topic of more words per line came up and how the solution looks when there are more lines involved. Turns out: Not too good. The lines shrink to 0 and the only thing you see is the margin. Flexbox to the rescue. Again!

The flex shorthand can take the values of three other properties: flex-grow, flex-shrink, and flex-basis. If we set flex-basis to 20%, this is the default width of the element. flex-shrink is set to 0 to avoid shrinking below those 20% but the flex-grow is set to 1 to allow growing larger than 20%:

h2:before, h2:after {
  flex: 1 0 20%;
  height: 3px;
  content: '';
  background-color: currentColor;
}

And a codepen for you to play around with this solution:

See the Pen Line-On-Sides Headers with Flexbox and minimal lines by Eric Eggert (@yatil) on CodePen.14519

And here is another example. This time we use border-image and an SVG to have an ornament around the heading:

See the Pen Line-On-Sides Headers with Flexbox and border images by Eric Eggert (@yatil) on CodePen.14519

Screenshot of my 24ways article

I was asked to write an article for 24ways.org, the well known web advent calendar, this year. It was published today! Hop over and read about The Accessibility Mindset. Thanks for all the good work behind the scene, Drew, Brian, Anna, and Owen!

If you prefer to read the article in German, don’t shy away and see Accessibility im Sinn, published on the Webkrauts Adventskalender. Thanks to Matthias, Jens, Nicolai, Kerstin, and Nils for their continuous efforts to bring those articles to the German speaking audience.

Once more with feeling poster

“The idea is to fill Facebook with music, breaking the monotony of selfies and sensationalism. If you ‘like’ this post you will be assigned a letter for a musician, band, artist or song for you to post on your timeline with this text.”

I liked Sandra’s post a few days ago and she assigned the letter “B” to me. I don’t have a lot of music I like and even less music that starts with the letter B. However there is one episode of a TV series I have warm feelings for and that is music related: The musical episode of “Buffy, the Vampire Slayer”.

It is called “Once more, with feeling” and I watched it first when it first aired in October 2002 in Germany. While the rest of the series was dubbed in German, they decided to broadcast the songs of the musical episode in English with German captions. All the actors sung their own parts, and there was also a lot of dancing going on, which made the episode stand out. Wikipedia has a nice section on why the episode is so special.

In Germany, the episode is available on Amazon Prime*, but I don’t think that the episode is too fascinating without knowledge of the Buffy canon.

*Affiliate link