Warning: Declaration of ElementorPro\Modules\Posts\Skins\Skin_Content_Base::register_controls(Elementor\Widget_Base $widget) should be compatible with Elementor\Controls_Stack::register_controls() in /home/techresu/public_html/wp-content/plugins/elementor-pro/modules/theme-builder/widgets/post-content.php on line 17

List separators likeMusic Festival Posters

 

A NON-STANDARD LIST STYLE

Music festival posters often feature an attractive way of listing bands (“the lineup”):

A list with dividers in between items… where no divider exists at the start or end of a line.

See real-life examples of this by doing a Google Images search for “festival lineup”.

An image that illustrates the structure of a typical music festival poster.
A dummy poster I created for this post

PROBLEM:

Tough doing this on a webpage

Festival posters are fixed designs where pixel-level control is a given. Information can be displayed any way you wish. The posters get printed and in modern times often distributed as JPG files through email and social media.

However rendering this style of list on a webpage isn’t easy, as web content and containers are much more dynamic. Such a list is not a typical writing structure and isn’t part of webpage standards (HTML & CSS).

On a webpage, you can certainly create a plain list with item bullets, configure that list so it appears horizontally centered and then breaking into multiple lines:

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
  • List item 6
  • List item 7
  • List item 8
  • List item 9
  • List item 10
  • List item 11

This is a start, however you’ll run into complications when it comes to differentiating outer dividers from middle dividers. There’s no way to detect line-breaks in plain HTML & CSS.

Perhaps one might use a half-way solution to achieve the poster-style list, by locking-in your container and font properties and then fine-tune individual dividers, however your list would be considered ‘unresponsive’ (e.g. it may not look good on mobile devices) which is undesirable.

As of yet, there’s no standard HTML way to create a dynamic list with separators, where no separator appears at the start or end of a line.

There are alternative solutions though…

SOLUTIONS:

How about Javascript? Maybe

Creating such a “list with rules” is certainly possible using Javascript to do real-time analysis of a given block of content, and make a determination on each divider as the content or container changes.

There’s all kinds of approaches. A function could be made to detect when a line-break occurs, and do something to the adjacent elements in the list. Or another way could be to check whether characters/space exists between a divider element and the edge of the container, and take appropriate action (e.g. hiding a divider).

In any case, a Javascript method relies on the script to fully load without errors and use functions supported by the browser. Beyond that any script of this nature could possibly have performance issues in large, complex documents.

Let’s use a CSS trick!

Alternatively, there’s a way to fake such a list by using a universal feature of HTML in an unintended way…

In the CSS specification, extraneous spaces are trimmed off the ends of lines; all modern browsers do this. It’s a dependable trimming action occurring on one side of a given line. Exploiting this, we can achieve our goal!

So knowing that browsers remove extra spaces from the ends of lines, we attach a blank space using content:" "; to the ::after pseudo-element to the end of every list item. The pseudo-element will naturally render between each item, will be trimmed from the ends of lines (due to the nature of HTML browsers), and the start of lines will have no divider because we’re using the ::after pseudo-element.

At this point we have differentiation between dividers on the sides of the list and dividers in the middle of the list. The question now is how do we visually render a divider, since we’re already using the content property for our trick?

To actually render visual dividers, we make use of the background properties on the pseudo-elements. There’s a lot of creative options here, we can use color backgrounds or background images. I love SVG-anything, and since dots are the most popular divider for such a list… we’ll use some SVG-based circles, inline and base64-encoded, for excellent performance and scaling.

A working demo:

Voila, a real-time, dynamic, responsive music-festival-poster style list!

Here’s the basic code, with important comments:


<ul>
    <li><a href="#">Crunchy Apples</a></li>
    <li><a href="#">Sweet Bananas</a></li>
    <li><a href="#">Bright Oranges</a></li>
    <li><a href="#">Juicy Grapes</a></li>
    <li><a href="#">Prickly Pineapple Pina Colada's</a></li>
    <li><a href="#">Seedy Watermelon</a></li>
    <li><a href="#">Purple Plums</a></li>
    <li><a href="#">Jacked Jackfruit</a></li>
    <li><a href="#">Can I Have A Canteloupe</a></li>
    <li><a href="#">Razzy Raspberries</a></li>
    <li><a href="#">Great Grapefruit</a></li>
    <li><a href="#">Krazy Kiwi</a></li>
</ul>

<style>
ul {
    text-align: center;
}

ul li {

    /* This is a key property, as it will distribute items horizontally and maintain the ::after pseudo-element in the middle of the list. */
    display: inline;
}

ul li::after {
    /* This is our magic trick. HTML browsers will strip a blank space from the ends of inline elements. */
    content: " ";

    /* This is just to add some breathing space. Note: Using 'padding' would cause problems if our list gets super-narrow. */
    letter-spacing: 1em;
    
   /* This is how we actually visually display a divider. Most times you would make use of the 'content' property, however we're already using it for our trick. Instead we use an inline base64-encoded image or SVG. Here I've included a circle shape. On a side note, FYI there's theoretical security risks when using inline SVG's and/or base64 attachments; Google it. */

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xMkMEa+wAAAAnSURBVBhXY/Dz89MA4sNA/B9Ka4AEYQIwfBgkiCwAxjhVopnppwEApxQqhnyQ+VkAAAAASUVORK5CYII=) center center no-repeat;
}

ul li a {
    /* This is so band names with multiple words don't wrap to a new line. */
    white-space: nowrap;
}
</style>

SUMMARY:

To achieve…

A list with dividers in between items… where no divider exists at the start or end of a line.

… we use the fact that HTML browsers trim extra spaces from the ends of line, and build our list styling from there.

1. There’ll never be a divider at the start of a line because we’re using the ::after pseudo-element (as opposed to ::before).

2. There’ll never be a divider at the end of a line because our ::after pseudo-element has content set to ” ” (a space), and all standard HTML browsers strip this extra space at the ends of lines.

3. Our actual visible divider is rendered by setting background properties on the pseudo-elements, since the content property is being used for our space-trimming trick.

This solution was originally posted on StackOverflow, however there wasn’t a complete explanation as to how it worked. It took me awhile to figure out what was going on, and with this post I’m sharing my findings. I hope to explore other music-festival-poster features and perhaps make a generating tool.

Comments are closed.