Is this possible? I would like to put a vertical text in the headings of the pipe table. Maybe some CSS?
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
Is this possible? I would like to put a vertical text in the headings of the pipe table. Maybe some CSS?
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
In theory this is possible for browsers that support CSS3 using the following:
For IE:
table.wiki-content-table th { writing-mode: tb-rl; }
For Safari, Opera and Firefox:
table.wiki-content-table th {
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
But in my brief exploration of this I've realised that on its own (particularly with tables) it can produce strange results and more work is needed on positioning, sizing and probably other things as well. I'll look at this again later today.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
I would
V e r t i c a l |
long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side .. | another (short ) text |
Done with :
||**V** _
**e** _
**r** _
**t** _
**i** _
**c** _
**a** _
**l** || long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side ..long text in another cell on the right side .. || another (short ) text||
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thanks Helmuti, but this is not exactly what I want. The letters shouldn't be one uder another, but one beside another, just in the normal text. Look the second link Ed gave, to get a better idea…
Thank you very much for trying to help :)
B.
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
Thanks, Helmuti, but I would rather avoid the images. Too much work, and the results are not satisfactory :)
Thanks, Rob, I'll try this code out and let you know the results. I would use this CSS for only one page…
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
sorry , for my late table - result - I forgot the linebreak…
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Huh, this is not what I want.. I wanted to make the whole column narrower by this. I don't want the side headers to turn vertical. Just the horizontal (top headers)…
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
I played a bit and found that if you set a height for the header row and make the background transparent, you can get things aligned and looking better. It's still kind of a hack and requires a lot of trial and error. I made 2 sample pages:
http://community-playground.wikidot.com/vertical-text-in-tables-45
http://community-playground.wikidot.com/vertical-text-in-tables-270
My work was greatly aided by this very cool CSS3 site! (http://css3please.com/ is a must bookmark site for anyone playing with CSS3)
-Ed
Thank you , Ed, this looks pretty good. You can see the results here:
http://pravopis.wikidot.com/pravopis:transkripcija-ipa
I changed the permissions for the site: I made it public, but I made all the categories except default category private. But, they all can be seen bu Wikidot members. This will do until the site is ready to go to public.
Ed, is it possible to have the background of the headings in color? I changed the font color for the headings, but I would really prefer to have the same color of the headers as in the rest of the tables… I saw that if I put color now the headings are still horizontal, and I understand why you put it transparent, but I was just wondering if it is after all, possible…
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
The background color issue is that it rotates the color and creates an angled rectangle.
I'm not sure there's a workaround for this. I'll play some more when I have more time.
-Ed
Hm, I have a problem. As I need this change for only one table on that page (the first one), I thought to separate it to a separate page with its css and then to include it into this page, but, when I do, the css of this page eliminates the CSS of the page where it is included, so the other tables change too. I tried to add the site CSS for tables to this page in order not to change the other two tables, but then, everything changes and I get the result as in this last picture you posted, Ed. Is it possible to make that CSS of the included page does not influence to CSS of including page? If not, this is not a solution I can use to solve my problem…
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
And also, you should see the table in IE
http://community.wdfiles.com/local--files/forum:thread/IE.jpg
This is how this page is seen in IE:
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
I should have mentioned that you need to use the tool on http://css3please.com if you want to change the rotations (or find another source to help you figure out the numbers you need in the filter and -ms-filter lines). That site recalculates all of the numbers for IE when you plug in the angle of rotation at the top of the CSS block for Firefox. Scroll down to the .box_rotate section, turn on the rule and play. It's very cool.
-Ed
Hi Brunhilda,
have a look on my test with rotated images:
http://community-playground.wikidot.com/vertical-text-in-tables-with-images-270
The background in the images is the same as on the images of your site ( taken from your site)
Have a try on the original page… and make the screen wiondow smaller and bigger - the images shoiuld go with it.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Using Helmuti's solution with images is probably the best way to get the result you're looking for. It would give you full control over the rotation angle you want (via your image editor) and you can set the background color of the header row to match the background of the image without the undesirable result we saw using CSS.
-Ed
I should have mentioned that you need to use the tool on http://css3please.com if you want to change the rotations (or find another source to help you figure out the numbers you need in the filter and -ms-filter lines). That site recalculates all of the numbers for IE when you plug in the angle of rotation at the top of the CSS block for Firefox. Scroll down to the .box_rotate section, turn on the rule and play. It's very cool.
This is too complicated for me, i barely know how to control the simple CSS.. :(
Thank you, Helmuti, but I think that I will make the picture from the whole table and then make it smaller so it can fit into the 1024px screen. I already did this here:
http://pravopis.wikidot.com/gramatika:vrste-glasova
Look at the big table at the end of the page. I thought maybe this solution is not too complicated, but I guess the easiest solution for now is to make a table in Word, to make an image of it, and then to include it in the page as a simple image.
Thank you all for you time and help!
B.
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney