Rendering <ul> elements bottom to top

Question

I have an ul with variable element count. When the li are too wide for list to handle them in single line it breaks the line and starts to render the li on lower line so I get something like this:

x - stands for element of a list

| - stands for list boundaries, or whatever that limits list width

|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered below
|xxxx     |

What I need is to render elements bottom-top so I could get:

|xxxx     |
|xxxxxxxxx|<- elements reached the end of container and remaining elements will be rendered above

Is it possible?

Here is some example code

<ul>
  <li>Some content</li>
  <li>Other content</li>
  <li>ContentContent</li>
  <li>Zawartość Contentu</li>
</ul>

Currently, it's CSS-free. I can add anything you will recommend to render it bottom-top order. Something like float:bottom which unfortunately doesn't exist.

Tillie

I suppose that it is not possible to change the way of automatic line breaking. But maybe you could add some <br /> manually? – Processional

Then I need to know the width of each element to determine when to break the line:/. – Tillie

If you may use javascript you could determine the necessary widths. – Processional

Answer 1

ul, ul li {
-webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
        transform: scaleY(-1);

}
ul {
    width: 350px;
}
 li {
    display: inline-block;
    width: 70px;
    zoom: 1;         
    *display: inline;
}

source: Bottom to top <ul> element arrangement

Kite

Answer 2

Bottom to top text direction isn't supported in css (http://dev.w3.org/csswg/css3-writing-modes/#writing-mode1), so any solution will require javascript or server-side manipulation.

Here's one solution using jQuery to manually slice up your long elements into smaller strings with <br /> tags at the beginning.

Demo: http://jsfiddle.net/FGk5R/2/

Code:

var LIST_WIDTH = 25; // Manually adjust this to change the width of your list to fit your container element
$('ul li').each(function(){
    var listitem = $(this).html();
    $(this).html(bottomToTop(listitem));

    function bottomToTop(item)
    {
       var length = item.length;
       var newhtml = '';

        if (length <= LIST_WIDTH)
        {
            return item;
        }
       while (length > 0)
       {          
            if (length <= LIST_WIDTH)
            {
                var newhtml = item.slice(-LIST_WIDTH) + newhtml;
            }
            else
            {
                var newhtml = '<br />' + item.slice(-LIST_WIDTH) + newhtml;
            }

            item = item.substr(0, (length - LIST_WIDTH));
            length = item.length;
        }
        return newhtml;
    };  
});

Becker

Answer 3

You would need to use javascript. If a line is longer than your maximum, you split it up in a way of growing the lower line as long as possible while staying below your maximum; tricky though - I suggest you check if the effort is really worth the gain.

Alsatia

I started with this idea but no, it's not worth the effort:/ So I started to look for some CSS/HTML solution and as far as I read its impossible to render elements of page in bottom-top order. – Tillie