Sorting html ul/li list in alphabetical vertical blocks

Question

Here's a problem I run into every now and then, that I usually try and solve from a back end perspective, but would like to know if there's a magic solution others have found to solve this on the front end.

Given a ul/li list, provided in the markup alphabetically, from a-z:

<ul>
    <li>Alpha</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
    <li>Golf</li>
    <li>Hotel</li>
    <li>India</li>
    <li>Juliet</li>
    <li>Kilo</li>
    <li>Lima</li>
    <li>Mike</li>
    <li>November</li>
    <li>Oscar</li>
    <li>Papa</li>
    <li>Quebec</li>
    <li>Romeo</li>
    <li>Sierra</li>
    <li>Tango</li>
    <li>Uniform</li>
    <li>Victor</li>
    <li>Whiskey</li>
    <li>X-ray</li>
    <li>Yankee</li>
    <li>Zulu</li>
</ul>

Typically, it's very easy to float the items left and sort them visually horizontal in blocks, like such:

However, to get columns, like this:

I've always had to break the HTML up into separate entities, such as four separate <ul> elements in the above example.

Is there a way to keep it all in one ul list without any additional markup, using just CSS (no JavaScript) to get a columnar look like the second image above? My guess is "no," but I've seen some magic before, and I'd like to answer this more definitively.

Wording

This is the best info I can find on this: novitskisoftware.com/test/multiplecolumnsEms.html – Jejune

try this one, not from my mind #13856124 – Gyronny

Answer 1

Not yet I´m afraid.

CSS3 has some nice features, see for example http://www.quirksmode.org/css/multicolumn.html but Internet Explorer does not support it and I don´t know how the support in IE9 will be (according to Microsoft non-existent in the beta at the moment)

Professed

...grumble, grumble, #@!%^& IE, grumble... :p – Wording

Multicolumn does not say anything about sorting. – Astragal

@Astragal The list is already sorted, the OP wanted (6 years ago...) to display the results in columns instead of rows. – Professed

Answer 2

You can use CSS3 Multicolumn Layouts, and its polyfill: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

Sublunar

This should be a plugin for jQuery. – Gamboa

Answer 3

I needed it today and wrote this python equivalent. You can write with native javascript.

# -*- coding: utf8 -*-
import math
# --------------------- EDIT THIS PART
#define columns
c = 4
# you can define to alphabetical list here
# i used to numbers, because range func. very effective for testing
list = range(1, 26, 1)
# ---------------------- END OF EDIT
# firstly sort

list = sorted(list)

# calculate total row
r = int(math.ceil(len(list) / c)) + (1 if len(list) % c is not 0 else 0)

index = 0
table1 = []
for x in range(c):
    table1.append([])
    for y in range(r):
        if len(list) > index:
            table1[x].append(y)
            table1[x][y] = list[index]
            index += 1


res = ''
for i in range(r):
    for x in table1:
        try:
            #print x[i]
            res += "%s\t|\t" % x[i]
        except IndexError:
            res += "%s\t|\t" % "_"
            pass
    res += "\n"

#print table1
print res

https://github.com/berkantaydin/vertical-alphabetical-sorting-with-columns

Fontanel

Answer 4

If you're doing it in PHP you can use a simple counter and %. I've managed to accomplish this in WordPress getting a list of custom taxonomies like so:

<div class="row gutters">

    <?php $taxos = get_categories ( array( 'taxonomy' => 'make' ) ); ?>

    <?php $count = 0; ?>

    <div class="col col_2">

        <ul>

            <?php foreach( $taxos as $tax ) : ?>

                <li><a href="/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li>

                <?php $count++; ?>

                <?php if( $count % 5 == 0 ) echo '</div></ul><div class="col col_2"><ul>'; ?>

            <?php endforeach; ?>

        </ul>

    </div>

</div>

You can also loop through an array and acheive the same thing. Output looks something like:

a    f
b    g
c    h
d    i
e    j

Fletcherfletcherism