javascript - Having trouble aligning texts rotated via CSS within -

javascript - Having trouble aligning texts rotated via CSS within <td> -

i'm modifying chris callison-burch's amazon mechanical turk word alignment ui (https://github.com/callison-burch/mechanical_turk_workshop/wiki/word-alignment or http://cs.jhu.edu/~ccb/interface-word-alignment.html ) doesn't utilize images rotated source words. i've got source (english) words rotated, i'm having problem aligning them properly. i'd have words wrap around table, english language words on top should aligned top of table, , on bottoms should aligned bottom of table. basically, want page (http://cs.jhu.edu/~ccb/interface-word-alignment.html) rotated texts instead of rotated images.

you can check code here: http://jsfiddle.net/bqtje/

specifically, i'm rotating words using next css class:

.rotated { display: block; position: relative; width: 20px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); }

thanks help in advance!

i asked question on www.reddit.com/r/css, , got (thanks www.reddit.com/u/dangoodspeed!)

first add together next lines css:

table { border-collapse:collapse; margin:100px auto;} td { border:2px solid white; min-width:20px; min-height:20px;} table tr:last-child td { overflow:hidden; height:100px; max-width:20px;} table tr:last-child td div { display:block; text-align:right; width:100px; height:20px; positon:relative; left:-40px;}

then wrap texts on bottom of table div instead of span.

you can see fixed version here: http://jsfiddle.net/bqtje/12/

note: words cannot longer 100px.

javascript html css