Text 90 graden draaien op een webpagina

[Druss]

De titel van de pagina (en ik weet hoe breed die klinkt) laat het al te raden. Ik wil graag mijn Twitter inputs op mijn pagina gedraaid weergeven. Nah een ochtendje googlen kom ik er op uit dat er een hoop verschillende manier zijn, maar niks echt cross-browser. Heb alleen oplossingen gevonden op IE, maar niets dat op alle grotere browsers wordt ondersteund.

http://bytes.com/topic/ja...90-vertically-firefox-css

Is er een manier om dus een random tekst (live van mn twitter) in 90 graden weer te geven? Het zij via een Scriptje, het generen van een image or what so ever.

Gaarne geen opmerkingen over de vraag of dit bruikbaar is in een webpagina, mbt gebruiksvriendelijkheid etc. Webdesign is een aparte wereld.

[jurp5]

-moz-transform CSS?

https://developer.mozilla.org/en/CSS/-moz-transform

[ Voor 59% gewijzigd door jurp5 op 26-08-2010 15:40 . Reden: verduidelijking ]

[BtM909]

Heb je gekeken naar de mogelijkheden om een image te genereren?

Heb je uberhaupt wel op internet gezocht http://snook.ca/archives/html_and_css/css-text-rotation

[Tharulerz]

Via php kan je perfect text op een image zetten, en vervolgens met imagemagick dit 90 draaien mag ook geen probleem vormen.

Hoever heb je uberhaupt gezocht, want dit lijkt me vrij basis...

[Rekcor]

BtM909 schreef op donderdag 26 augustus 2010 @ 15:39:
Heb je uberhaupt wel op internet gezocht http://snook.ca/archives/html_and_css/css-text-rotation

Hij zegt van wel

Druss schreef op donderdag 26 augustus 2010 @ 15:36:
Nah een ochtendje googlen

[JackPoint]

http://scottgale.com/blog/css-vertical-text/2010/03/01/ werkt voor mij goed in Internet Explorer, Firefox, Opera en Chrome.

[RM-rf]

JackPoint schreef op donderdag 26 augustus 2010 @ 15:47:
http://scottgale.com/blog/css-vertical-text/2010/03/01/ werkt voor mij goed in Internet Explorer, Firefox, Opera en Chrome.

dat is het .. met CSS is dit best te doen, zoals in die voorbeeldpagina, enkel moet je wel rekening houden dat de CS-methode voor MSIE (filter: progid:DXImageTransform.Microsoft.BasicImage) niet in Firefox , Opra en webkit werkt, maar die dan wel de door MSIE niet ondersteunde CSS3-methode 'transform' ondersteunen, alhoewel wel allemaal met een eigen voorvoegsel..

ik zou dat zeker verkiezingen bóven een optie van een afbeelding die gegenereert wordt, of een flash-oplossing

[boe2]

-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
writing-mode:tb-rl

zou het redelijk cross-platform moeten maken

[Druss]

Inderdaad niet goed genoeg gezocht, zal toch aan de zoektermen hebben gelegen. Bedankt, voor wat blijkt toch een beetje onnozele vraag. Op een gegeven moment staar je je suf, ik gooi het op een soort van "writers block", mijn excuses.

Had het inderdaad nu binnen de minuut werkend. Bedankt voor jullie tijd/hulp!

[geert1]

Hm, wist niet dat hier zo'n hack-vrije cross-browser oplossing voor was tegenwoordig. Ideaal zo'n topic!

Kleine kanttekening: Als je tekst de andere kant op wilt draaien, dus 90 graden naar links, dan is voor IE een filter-declaratie nodig in plaats van de writing-mode. Zo begreep ik het ten minste.

[Sebazzz]

Nu nog wachten tot CSS3 transformations een beetje bekend is bij alle browsers

Druss schreef op donderdag 26 augustus 2010 @ 15:36:
Gaarne geen opmerkingen over de vraag of dit bruikbaar is in een webpagina, mbt gebruiksvriendelijkheid etc. Webdesign is een aparte wereld.

Must.. resist...

Webdesign aparte wereld of niet, uiteindelijk heb je toch met de eindgebruiker te maken. En zolang je direct met de eindgebruiker te maken heeft, is gebruiksvriendelijkheid altijd een punt.

[Bahmi]

Best grappig.

Bij mijn stage moest ik een tabellenweergave op het scherm tonen, met enorm veel waardes.
Met die CSS3 transformaties had ik de tekst onder een hoek van -45 graden gezet, waardoor er veel meer informatie in mijn tabellen passte, omdat alles dicht op elkaar zat maar wel leesbaar was.

Ik zie hier zeker dus wel een functie die op sommige plaatsen de gebruiksvriendelijkheid bevorderd.

[Druss]

Webdesign aparte wereld of niet, uiteindelijk heb je toch met de eindgebruiker te maken. En zolang je direct met de eindgebruiker te maken heeft, is gebruiksvriendelijkheid altijd een punt.

Zo typisch om er toch nog even op te reageren op GoT, vandaar ook mijn opmerking in de start.. hahaha onverbeterlijk!

Anywho, het is op een of andere manier erg moeilijk een twitter goed gepositioneerd in een DIVje te positioneren.. komt door de eigen stylesheets van twitter... Grrr

[X-trace]

Anywho, het is op een of andere manier erg moeilijk een twitter goed gepositioneerd in een DIVje te positioneren.. komt door de eigen stylesheets van twitter... Grrr

En daarom heeft twitter een API waarmee je ruwe data op kunt halen: http://dev.twitter.com/doc/get/statuses/user_timeline. Dan heb je geen 'last' van externe stylesheets

[_Thanatos_]

Bahmi schreef op donderdag 26 augustus 2010 @ 23:40:
Best grappig.

Bij mijn stage moest ik een tabellenweergave op het scherm tonen, met enorm veel waardes.
Met die CSS3 transformaties had ik de tekst onder een hoek van -45 graden gezet, waardoor er veel meer informatie in mijn tabellen passte, omdat alles dicht op elkaar zat maar wel leesbaar was.

Ik zie hier zeker dus wel een functie die op sommige plaatsen de gebruiksvriendelijkheid bevorderd.

[afbeelding]

Cool gedaan, maar het lijkt wel verdacht veel op een spreadsheet, zo met die lijnen rondom iedere cel, maar ik kan het natuurlijk fout hebben (graag zelfs). Zou je er wat code van willen posten zodat we er allemaal wat aan hebben?

[ Voor 3% gewijzigd door _Thanatos_ op 30-08-2010 15:47 ]

[Bahmi]

Dat plaatje is ook van Excel, was maar een voorbeeldje.
Helaas heb ik die code geschreven in mijn stage, dus kan ik die niet publiceren.

[Anoniem: 326972]

Kijkje op google, en met twee regeltjes ben je klaar.
hier...