Italic font simulieren (Fake slant)

[laxersaz]

Hallo zusammen,

wir haben momentan das Problem, dass wir eine Schriftart verwenden müssen, die keinen kursiven Schnitt hat. Unsere Designer würden die aber trotzdem gerne kursiv verwenden (wobei der Text natürlich dynamisch bleiben muss). Gibt es einen Weg, das in Flex zu "simulieren" (wie das anscheinend auch z.B. Word tut) - am besten per AS3/CSS?

Viele Grüße,
Laxersaz

[thomas_E]

Ihr könntet es mit einer Displacement-Map machen, wird aber evtl etwas unscharf.

Texte dynmaisch, kein Thema, aber wie soll es eingesetzt werden?
ein- oder mehrzeilige Textfelder?
soll das gesamte Textfeld oder nur einzelne Zeichen kursiv gesetzt werden?

[~pyropete~]

Zitat von laxersaz

Unsere Designer würden die aber trotzdem gerne kursiv verwenden

Dann müssten die meiner Meinung nach auch eine andere Schrift liefern.

Wenn sich einer ein Auto kauft und das dann auch noch selbst grün lackieren
muss, nur weil der Hersteller das so will, dann stimmt da ja auch was nicht...

Red doch nochmal mit denen...

[laxersaz]

Das ganze soll bei mehrzeiligen Textfeldern eingesetzt haben. Dabei sollen alle Zeichen kursiv werden. Die Möglichkeit mit der Displacement-Map schaue ich mir mal an - da hatte ich noch garnicht dran gedacht.

@~pyropete~: Manchmal kann man da leider nicht so viel machen. Für uns gibt es gerade zwei Möglichkeiten:

- wir finden eine Möglichkeit, Italics zu simulieren oder
- wir sagen den Designern, dass es nicht geht

[shin10]

Kann natürlich problematisch sein, was Lizenzen betrifft, aber ihr könntet doch "einfach" einen eigenen kursiven Schnitt der Font erstellen.

Bsp.: http://www.high-logic.com/fontcreato...formations.pdf (Seite 4)

edit: Ich hab mit dem Programm noch nicht gearbeitet - kann also keine Empfehlung dafür aussprechen. Nur so als Idee (und 79 199 Euro (oops, dann vielleicht doch zu viel) sind vergleichsweise wenig, verglichen mit dem Aufwand das zu simulieren; bei unsicherem Ergebnis)

[thomas_E]

@laxersatz,
dann hier mal eine Basis, auf der Ihr aufbauen könnt:

PHP-Code:

var tf:TextField = new TextField();
    tf.defaultTextFormat = new TextFormat("Arial", 20);
    tf.autoSize = "left";
    tf.text = "ist das nun Kursiv?\noder auch nicht?\noder was?";
    tf.setTextFormat(new TextFormat("Times New Roman", 30), 20, 25);
    tf.x = 150;
    tf.y = 200;

var r:Rectangle = new Rectangle(-10, 0, tf.width + 20 );

var m:Matrix = new Matrix();
    //width is egal, height sollte >= max(ober, unterlänge) * 2 sein
    //und y == -height /2 
    m.createGradientBox(100, 100, Math.PI / 2, 0, -50);
    
//das sollte nun dem Offset von baseline zu max(oberlänge) sein
var oy:Number = m.ty;

//ein container zum Zeichnen
var s:Shape = new Shape();
for (var i:int = 0, len:int = tf.numLines; i < len; ++i) {
    
    var metrics:TextLineMetrics = tf.getLineMetrics(i);
    
    r.height = metrics.height;
    m.ty = r.y + metrics.ascent + oy;
    s.graphics.beginGradientFill("linear", [0x00, 0xFF], [1, 1], [0, 255], m);
    s.graphics.drawRect(r.x, r.y, r.width, r.height);
    
    r.y += metrics.height + metrics.leading;
}

r = s.getBounds(s);
var bd:BitmapData = new BitmapData(r.width, r.height, false, 0);
    bd.draw(s, new Matrix(1, 0, 0, 1, -r.x, -r.y));

// @param mapPoint        die 3 durch Testen ermittelt, 2px vermutlich wegen dem padding beim tf, aber ka wo der 3. Pixel herkommt
var f:DisplacementMapFilter = new DisplacementMapFilter(bd, new Point(3 + r.x, 3 + r.y), 4, 0, 20, 0, DisplacementMapFilterMode.CLAMP);
tf.filters = [f];

//var b:Bitmap = new Bitmap(bd);
//    b.x = tf.x + f.mapPoint.x - 1;
//    b.y = tf.y + f.mapPoint.y - 1;
//addChild(b);
addChild(tf); 


ich hab mit Typografie nicht soo viel am Hut; also werdet ihr sicher noch ein besseres Ergebnis hinbekommen mit den TextLineMetrics

[shin10]

Oha, kommt gar nicht so verpixelt wie ich das befürchtet hätte.

well done.

[Martin Kraft]

An der Stelle sollte man vielleicht anmerken, dass sowas aus typographischer Sicht eine Todsünde ist. Das ist fast so fies, wie eine Schrift durch das hinzufügen eine Outline fettstellen zu wollen!

Hamburgefons Hamburgefons

Wie man unschwer erkennen kann, ist eine echte Kursive etwas ganz anderes, als eine einfach in die Schräge verzerrte Normale!
Aber das sollte Euer Grafiker eigentlich wissen, wenn er sein Geld wert ist ... ?!