| Autor |
Nachricht |
Gratin
Threadersteller
Dabei seit: 25.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 24.07.2013 23:00
Titel Rotierter Text ist pixelig – Lösungsvorschläge? |
  |
|
Hi!
Mit Hilfe des jQueryRotate-Plugins (http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js) habe ich Text gedreht. Das Problem ist jetzt dass er dadurch absolut unansehnlich wird. Siehe Bild:
Ich hab den Text auch via CSS3 gedreht – mit dem gleichen Ergebnis:
Der Font bekommt Stufen, die Buchstaben scheinen zu springen und auch das Spacing... na ja.
Ich suche jetzt schon seit Stunden im Internet und dachte mir dass mir hier vielleicht jemand ein Stichwort nennen kann das mich bei der Suche weiterbringt. Oder hat hier jemand DIE Lösung?
MfG,
Gratin.
|
|
| |
  |
 |
qualidat
Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: 
|
Verfasst Do 25.07.2013 03:02
Titel
|
|
|
a) sehe ich bei Klick auf den Link nur Sourcecode, ich hatte ein visuelles Beispiel erwartet
b) liegt das wohl daran, dass ein Browser Text nur waagerecht und senkrecht darstellen kann, ob da nun Javascript werkelt oder nicht . Vermutlich wird der Text mit 72 dpi in ein Canvas gezeichnet und dann gedreht - das gibt nun mal nicht viel her.
Mein Vorschlag: Nimm SVG, das ist Vektorgrafik, die wird so schnell nicht pixelig ...
|
|
| |
 |
|
|
Anzeige
|
|
|
Gratin
Threadersteller
Dabei seit: 25.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 27.07.2013 05:39
Titel
|
|
|
Ach so entschuldige, ich meinte http://code.google.com/p/jqueryrotate/.
Zu deinem Vorschlag:
Meintest Du ich soll einen Font im .svg-Format verwenden (ich habe leider ein .svg-Anwendungs-Defizit, deswegen die Frage)? Das habe ich ausprobiert, allerdings ohne Ergebnis: Ich habe einen Font online umwandeln lassen (http://www.freefontconverter.com/) und dann versucht diesen via font-face einzubinden, was nicht funktioniert hat (der Font wurde komischerweise gar nicht erkannt?!).
Bei meiner Recherche bin ich inzwischen auf diese Möglichkeit gestossen, was meinem Anliegen schon sehr nah kommt. (-> Canvas  ).
Dennoch erstmal: Vielen Dank.
|
|
| |
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Sa 27.07.2013 13:20
Titel
|
|
|
Du könntest auch mal ausprobieren, die Hardwarebeschleunigung im Browser zu erzwingen, also das Plugin so zu verändern, dass zusätzlich translate3d mit angehangen wird:
| Code: |
transform: rotate(Xdeg) translate3d(0, 0, 0);
|
Deckt aber nicht alle Browser ab. Zumindest in Webkit wirkt das ab und zu Wunder.
|
|
| |
|
|
Piki
Dabei seit: 30.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 27.07.2013 19:46
Titel Re: Rotierter Text ist pixelig – Lösungsvorschläge? |
|
|
| Gratin hat geschrieben: | habe ich Text gedreht. Das Problem ist jetzt dass er dadurch absolut unansehnlich wird.
Der Font bekommt Stufen, die Buchstaben scheinen zu springen und auch das Spacing... na ja. |
Was hast Du denn gedacht?! Dafür ist die Schrift nicht gemacht. Das ist ganz normales Verhalten und lässt sich nicht verhindern. Screenfonts sind optimert für die halbwegs passable Darstellung in der Pixelmatrix eines relativ niedrig auflösenden Mediums. Es kann also nur Unfug dabei herauskommen, wenn man die Schrift relativ zu dieser Matrix rotiert.
(OT: Und überhaupt – wer macht denn sowas und warum?!  )
| Gratin hat geschrieben: | | hat hier jemand DIE Lösung? |
Nicht drehen.
|
|
| |
|
|
Gratin
Threadersteller
Dabei seit: 25.02.2013
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 29.07.2013 08:58
Titel
|
|
|
@Morgo:
Hat leider auch nichts gebracht 
@Piki:
Gedacht hab ich mir dabei ehrlich gesagt nichts. Aber deine Erklärung find ich schlüssig/macht Sinn.
(Zur OT-Frage: Der rotierte Text passt schon sehr gut zum Gesamt-Konzept der Site, da kann ich aber zur Zeit nicht näher drauf eingehen)
Momentan haben wir uns auf die Notlösung geeinigt, dass der Text beim :hovern normal (0deg) angezeigt wird.
Trotzdem: Vielen Dank an alle. Scheinbar ist zur Zeit das Problem (zumindest simpel) nicht zu beheben.
|
|
| |
|
|
zeji
Dabei seit: 05.10.2010
Ort: -
Alter: 18
Geschlecht:
|
Verfasst Mo 29.07.2013 10:58
Titel
|
|
|
| qualidat hat geschrieben: | | Vermutlich wird der Text mit 72 dpi in ein Canvas gezeichnet und dann gedreht - das gibt nun mal nicht viel her. |
Das Plugin arbeitet mit CSS3-Transforms.
Hier Unterschied CSS-Transform auf reinen Text und auf Canvas
http://jsfiddle.net/martinaglv/mXr3B/
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
JPG von 1 MB zu pixelig bei 72 dpi ?
ae 7.0: schrift in mov ist pixelig
pdf wird pixelig dargestellt
Schrift im Bild im Photoshop pixelig ?
Photoshop: Schrift pixelig (im .gif oder .jpg)
Webseite erstellen - Schrift pixelig
|
|
Willkommen auf dem Portal für Mediengestalter
