Tekst vertikaal plaatsen voor alle browsers

Status
Niet open voor verdere reacties.
A

Aloneal

Gebruiker
Lid geworden
12 nov 2011
Berichten
168
Is er een methode die werkt voor alle gangbare browsers om tekst in een website vertikaal te plaatsen? Tekst in een afbeelding komt zelden echt scherp voor de dag is mijn ervaring.

Het is een CSS-HTML site.
 
Wat bedoel je exact met verticaal plaatsen?

Het meest gangbare gebruik van die term is het centreren van een blok verticaal op een pagina.
Code: 
p{
vertical-align:middle;
}
Bedoel je het plaatsen van tekst (als in één letter op één regel), dan kan dit zo banaal als doormiddel van de <br /> tag.
 
Hoi-hoi,
Een vertical-align op een <p> element zie ik niet zo werken.
Vertical-align werkt wel voor images, en voor tabel-cellen.

Maar ik begreep dat het om een gekantelde/geroteerde tekst moest gaan, met letters die een kwart slag gedraaid staan.
Met gewone css2.1 kan dat niet, wel met css3.

Tenminste ... dat wil zeggen: het gaat enigszins met css3 (+ aanvullende IE-codes), want het resultaat in de tegenwoordige browsers is niet overweldigend.
  • Chrome doet het goed.
  • Firefox, Opera en Safari maken de borders van gekantelde tekst niet zoals het hoort.
  • Firefox zet de gekantelde tekst te veel naar links.
  • Opera maakt er erg slechte letters van.
  • Internet Explorer doet het (met IE-only code in een Conditional Comment) wel redelijk, maar de hoogte is t/m IE9 afwijkend, en zijn ook andere afwijkingen tussen IE7, IE8, IE9 en IE10 die ook weer afgevangen moeten worden.
Ik heb daar maar eens een testpagina voor gemaakt:


=======
Tekst in een afbeelding komt zelden echt scherp voor de dag is mijn ervaring.
Klik om te vergroten...
Dat verbaast me, want tekst in een afbeelding kan loeischerp zijn.
  • Je moet tekst-afbeeldingen alleen niet als jpg opslaan, maar als .png (zie ook hier).
  • Sterker: een afbeelding van een tekst kan mooier zijn dan browsers kunnen bakken.
  • Met een tekenprogramma kan je namelijk teksten invoeren met een anti-alias (= zonder kartelrandjes), en browsers hebben dat niet.


mooie-tekst.png

Boven: browser-resultaat
Onder: image via tekenprogramma​

=======
Conclusie:
Gekantelde tekst is met een image wel zo mooi.
Iets anders is de leesbaarheid van gekantelde tekst: de bezoeker moet zijn/haar hoofd draaien om te kunnen lezen wat er staat, wat niet zo handig is. Dus: voorzichtig gebruiken, en niet te veel. ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Dankjewel voor je zeer uitgebreide antwoord CSSHunter. Ik vroeg inderdaad naar het realiseren van een gekantelde tekst. Ik begrijp dat het gebruik van een .png afbeelding hierbij het meest raadzaam is. Echter mijn ervaring is helaas dat ook .png afbeeldingen vaak niet scherp overkomen als ze klein gehouden worden. Jouw voorbeeldtekst ziet er goed uit, maar wellicht komt dat wel omdat deze groot en dik is. Zou de tekst ook mooi en scherp zijn wanneer de weergave een 14px tekst zou zijn? Ik heb dat onlangs met een symbool geprobeerd, maar het kwam bij mij tamelijk wazig uit de bus.

Voor de duidelijkheid ga ik als volgt te werk: Ik werk in Corel Draw X5 en sla het figuur op als .png. Vervolgens zorg ik voor weergave via <img src="http://www.voorbeeld.nl/afbeeldingen/test.png" alt="Voorbeeld" border="0"/> Ik verklein de afbeelding dus niet met CSS, maar toon hem in zijn orginele grootte.

Ik heb even gecontroleerd, en het symbool dat ik gebruikte is 14 bij 14px, met een resolutie van 300 bij 300 dpi.

Al schrijvende bedenk ik me plotseling iets. Het symbool heeft een transparante achtergrond. Misschien is het resultaat w�l scherp wanneer ik een achtergrond maak in de kleur van mijn website? Dat ga ik proberen en zal verslag doen. :)

Edit: Ik zie dat het jou op je voorbeeldpagina wel goed lukt met een image!! #jaloers
 
Laatst bewerkt:
Oke, ik geloof dat ik hem te pakken heb. Corel Draw heeft bij exporteren automatisch de optie 'ongekarteld' aangevinkt. Zet ik die uit dan wordt het wat blokkiger (met goede ogen) maar wel haarscherp! Ik ga er morgen mee verder experimenteren. Bedankt alvast. Ik ga de vertikale tekst nu vast en zeker met .png doen! :)
 
csshunter zei:
Hoi-hoi,
Een vertical-align op een <p> element zie ik niet zo werken.
Klik om te vergroten...

Het was al aardig laat voor mij, nachtdienst hey.... :confused:

In ieder geval hier de oplossing met in CSS begrijpbare taal. Is getest.

Code: 
.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* Accepteer links, rechts, top, bodem, cordinaten: dit is niet verplicht maar een goed idee voor het stylen*/
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Nodig in IE9+. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Het kan zijn dat het op een fossiel niet werkt maar in dat geval is de persoon toch echt toe aan een nieuw systeem.

Edit: @CSSHunter, je verwijst naar w3schools op je website??? Je weet dat die site boordevol fouten staat en internationaal wordt afgeraden om ook maar te raadplegen als naslagwerk? Het W3C heeft niet voor niets meerdere malen hen verzocht een andere naam aan te nemen.

http://w3fools.com/

Edit2: Gezien het onderwerp toch tekst is. Neem eens een kijkje naar de Google Web Font API indien je met font types wil werken. Zo kun je een font veilig kiezen dat altijd geladen kan worden.
 
Laatst bewerkt:
@ C0mpN3rd:
Is getest.
Klik om te vergroten...
Hé merkwaardig.
Ik kom er met een testpagina op uit (dwz via Netrenderer), dat IE9 en IE10 het alle twee doen met alléén het -ms-prefix,
en zonder het filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3).

IE8 doet het niet met het prefix, maar doet het zowel met de writing-mode: tb-rl (zoals in mijn bovenstaande testpagina) als met het filter, d.w.z. als dat een rotation=1 krijgt.

Maar IE blijft vol rariteiten! :D
Ook IE9 doet het met het filter, maar dat moet dan wel op rotation=0 staan als ook de prefix (voor IE10) wordt gebruikt. En de hoekjes van de randen worden erg lelijk.

=======
Het kan zijn dat het op een fossiel niet werkt maar in dat geval is de persoon toch echt toe aan een nieuw systeem.
Klik om te vergroten...
Heu-heu-heu! :rolleyes:
Er zijn nog pittig veel pc-bezitters die op Windows-XP draaien, en het vertikken om een nieuwe Windows te kopen alleen om IE9 te kunnen draaien!
Die zijn dus aangewezen op IE8 (voor zover ze niet weten dat er betere browsers zijn).
Volgens de statistieken zitten in NL nog 11,4/(25,4+11,4)= 30% van de Internet Explorer-surfers op IE8.
Dat kan je dus geen fossiel noemen, en voor zo'n grote groep bezoekers zal je toch de nodige IE8-workarounds moeten invoegen. :)

=======
Je weet dat w3schools boordevol fouten staat?
Klik om te vergroten...
Yes, I know! De w3fools ken ik ook, is leerzaam wie niet gewend is de enige echte specs in te duiken. - Maar af en toe verwijs ik er wel eens naar, als het geen kwaad kan.
  • En w3schools is altijd nog beter dan wat je aan naslag-kennis en code-uitleg krijgt als je hier op het forum in een HTML-codebox op een element klikt. ;)
Bv. je klikt op:
HTML: 
<html>
... en dan ga je in de Tutorial "Creating Web Documents" eens kijken wat ze over het !Doctype te vertellen hebben.
Je gelooft je ogen niet!!! :shocked:

=======
@ Aloneal,
... Het symbool heeft een transparante achtergrond. Misschien is het resultaat wèl scherp wanneer ik een achtergrond maak in de kleur van mijn website?
Klik om te vergroten...
Nop, het zit 'm puur in de manier van opslaan.
Met vriendelijke groet,
CSShunter
 
csshunter zei:
[*]En w3schools is altijd nog beter dan wat je aan naslag-kennis en code-uitleg krijgt als je hier op het forum in een HTML-codebox op een element klikt. ;)

Bv. je klikt op:
HTML: 
<html>
... en dan ga je in de Tutorial "Creating Web Documents" eens kijken wat ze over het !Doctype te vertellen hebben.
Je gelooft je ogen niet!!! :shocked:
Klik om te vergroten...

Ik zou bijna de term OMG (welke ik verafschuw) in de mond nemen. Wie is er ooit op het idee gekomen naar zoiets dergelijks door te linken?

Je zult vast gelijk hebben dat het -ms- prefix voldoende is (ik geloof het direct). Ik heb dat stukje code niet zelf geschreven nog diepgaand onderzocht. Slechtst getest op of het werkte of niet. Misschien mijn fout.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan