Rendering 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.

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

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;
    };  
});

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.