CODEWITHSUNDEEP
css
322896
322896

Reputation: 986

Container of vertical writing mode elements uses their height to compute the container's width

What I am trying to achieve is a horizontal scrolling images which have vertical writing mode captions. The mockup looks like this:

<figure>
  <div class="image"></div>
  <figurecaption>
    <p class="vertical">This is the caption text.</p>
  </figurecaption>
</figure>

When I try to make the figure caption's writing mode vertical, the container () seems to still use the caption's original width (the height in vertical) to compute its width. So there is gap between figures.

I can specify an explicit width of the container to eliminate the gap. I am wondering if there is a better way that the container can have its width fit its content.

Here is the jsfiddle: http://jsfiddle.net/XGC2B/1/

Here is the minimum version: http://jsfiddle.net/zw8Gr/1/

Upvotes: 0

Views: 375

Answers (1)

djfm
djfm

Reputation: 2468

Seems it didn't like the 'inline-block' display!

This does it on my browser: http://jsfiddle.net/zw8Gr/10/

p.vertical {
    -webkit-writing-mode: vertical-rl;
}

Upvotes: 1

Related Questions