[INFO] Chinesische Schriftzeichen in Flash

[thomiko]

Hallo miteinander,

hier im Forum haben schon einige so ihre Probleme mit chinesischen (bzw. japanischen, kyrillischen ...) Schriftzeichen gehabt. Stichworte: XML, Unicode, Font einbinden usw.
Ich habe mich in den letzten Tagen ein bisschen damit befasst. Da ich eine meines Erachtens sehr flexible und schlanke Lösung dafür gefunden habe, möchte ich Euch kurz schildern, was ich so getrieben habe; vielleicht hilft das ja jemandem weiter!

1. XML, Unicode: man kann auf zwei verschiedene Arten chinesische Schriftzeichen in einer UTF-8 kodierten XML-Datei abspeichern, um sie später in Flash zu laden:
- einfach als Schriftzeichen (z.B. Copy&paste von einer Webseite)
- mittels HTML-Codes: **20013;**22269;**20849;**20135;**20826; (Ihr muesst hier nur ** durch &# ersetzen, das FF zeigt sonst die chinesischen Zeichen direkt an)

Natürlich braucht man einen Editor, der UTF-8 Daten richtig abspeichert (Word ist da sicher nicht die beste Wahl ) ... Ich verwende die WebTools-Edition von Eclipse (http://download.eclipse.org/webtools...-200512210855/), da ist ein XML-Editor dabei.

Damit wir bis hierher vom gleichen reden, hier ein Screenshot (http://www.nottingham.ac.uk/~ccztk/chinese/xml.jpg) und die entsprechende XML-Datei (http://www.nottingham.ac.uk/~ccztk/chinese/chinese.xml), damit Ihr schauen könnt, ob es in Eurem Editor richtig angezeigt wird.

2. Darstellung in Flash: die XML-Datei wird ganz normal reingeladen und der chinesische Text wird dann mittels htmlText angezeigt, keine besonderen Maßnahmen erforderlich. Gilt sowohl für manuell erzeugte als auch für dynamisch generierte Textfelder.

3. Einbetten: mit chinesischen Schriftzeichen zumindest sehr nervig und schlecht!
Theoretisch sollte das ja alle Probleme lösen, in der Praxis tut es das leider nicht. Wenn jemand eine ueberall funktionierende gute Loesung hat, gerne her damit. Ich habe wirklich sehr vieles ausprobiert.
Probleme:
- wenn man alle chinesischen Schriftzeichen einbettet, hat die swf-Datei mehr als 2MB. Außerdem dauert das swf'en der fla-Datei ewig, macht wirklich keinen Spaß.
- wenn man die Schriftzeichen als Bitmaps einbindet, dann sieht es natürlich beim Hochskalieren grauenhaft aus.
- wenn man die Schriftzeichen als Antialias-Zeichen einbindet, wird die swf-Datei noch viel größer. Außerdem werden dann bei manchen Schriftarten manche Zeichen nicht angezeigt (don't ask me why).
- egal, wie man es einbindet, man sieht auf manchen Computern trotzdem einfach nichts, keine Ahnung warum!

Mit russischen Schriftzeichen gab es bisher keine nennenswerten Probleme beim Einbetten (XML-Behandlung s.o.). Allerdings ist das nur ein Alphabet mit 33 Buchstaben im Gegensatz zu vielen tausend chinesischen Schriftzeichen. Hier als Beispiel für eingebettete russische Zeichen ein Schießspiel für die grammatischen Fälle: russische Schriftzeichen

4. meine Alternative zum Einbetten: Schriftzeichen dynamisch mittels der GD-Library (http://www.boutell.com/gd/) in PHP generieren und dann in Flash laden

Hier mal ein Beispiel: http://cele.nottingham.ac.uk/~ccztk/chinese/viewer.php (Rechtsklick auf die Zeichen und dann "Bigger" oder "Smaller" zum Rauf- und Runterskalieren)

Flash schickt ein Array mit den Codenummern der benoetigten Zeichen an PHP. PHP generiert fuer jedes Zeichen png-Bilder in verschiedenen Groessen. Wenn PHP fertig mit dem Bilderbasteln ist, dann laedt Flash diese Bilder und zeigt sie an, sobald alle Bilder der Anfangsgroesse geladen sind.

Zum Vergleich:
- alle Zeichen eingebettet -> Flash-Datei mehr als 2MB
- die PHP-GD-Methode -> Flash-Datei 12KB, alle Bilder zusammen (340 Stueck) 104KB

Wenn es jemanden interessiert, dann kann ich gerne noch mehr Infos zur PHP-GD-Methode schicken.

Viele Gruesse,

Thomas

[Scheidlf]

&#20826

es wird nur als "Code" angezeigt, kannst oben auch wieder ändern...

[thomiko]

na dann mach mal ein Semikolon dahinter: 党 (mein Browser zumindest zeigt jetzt ein chinesisches Schriftzeichen an)

[Scheidlf]

啂偌汎倮传亊俨傜Hups

[Sir Freako]

Hi thomiko ,

danke für die Info noch eine Frage :

hast du das alles entwickelt um das Problem zu lösen oder die GdLib lösung in einem Produkt einzusetzten .

Ich habe schon Flashsites mit eingebetteten chinesischen schriftzeichen gesehen ( gäbe es nicht auch die möglichkeit die Zeichen über .css einzubetten ) wenn sie einfach so im Browser angezeigt werden müßen sie ja auch Local auch irgendwo vorhanden sein .

dei Idee ist gut

grüße m@

[thomiko]

Das Beispiel mit dem Viewer oben lässt sich natürlich noch auf mehrere Arten optmieren. Momentan kommen bei jedem Aufruf der Seite 340 Bilder-Requests (68 Zeichen in jeweils 5 Größen) von Flash an den Server (ich habe das hier mal so gemacht, damit Ihr seht, wie lange diese Variante braucht).

Mögliche Änderungen:
- das PHP-Skript generiert nicht automatisch alle Zeichen neu, sondern überprüft erst, ob bestimmte Zeichen schon auf dem Server vorhanden sind. In diesem Falle generiert PHP also nur die "neuen" Zeichen.
Wenn also jemand z.B. immer den gleichen Text in einer Flash-Anwendung verwendet, dann kann man die Zeichen einmal generieren und bei jedem Aufruf werden sie im Nu von Flash geladen.
- anstatt für jedes Zeichen/Schriftgröße-Kombination eine eigene Datei zu erstellen, könnte man auch für jede Schriftgröße eine einzige Bilddatei erstellen (alle Zeichen in einer Art Raster), in der dann alle Zeichen dieser Schriftgröße enthalten sind. Dadurch hätte man dann nur noch 5 Bild-Requests anstelle von 340. In Flash verwendet man dann halt Masken, um die nicht benötigten Zeichen auszusparen.
Ich weiß nur nicht, ob Flash gut mit vielen Masken arbeitet, obwohl ich nicht denke, dass es ein Problem ist?!

Gruß,

Thomas

[thomiko]

Zitat von Sir Freako

hast du das alles entwickelt um das Problem zu lösen oder die GdLib lösung in einem Produkt einzusetzten.

Ich werde in meinem Job hier als E-learning-Entwickler Sprachlernmaterialien für viele Sprachen entwickeln, unter anderem für Japanisch und Chinesisch. Zunächst wollte ich einfach rausfinden, wie es mit der Speicherung von chinesischen Schriftzeichen in XML-Dateien ausschaut. Dabei bin ich dann schnell auf das Problem der Darstellung und der Einbettung dieser Schriftzeichen gestoßen.

Zitat von Sir Freako

Ich habe schon Flashsites mit eingebetteten chinesischen schriftzeichen gesehen (gäbe es nicht auch die möglichkeit die Zeichen über .css einzubetten) wenn sie einfach so im Browser angezeigt werden müßen sie ja auch Local auch irgendwo vorhanden sein.

Hast Du zu dem CSS-Vorschlag weitere Informationen? Ich wüsste momentan ehrlich gesagt nicht, wie das funktionieren sollte.

Zu dem lokal vorhanden sein: das ist meines Erachtens genau das Problem. Auf meinen Computern lief das mit den chinesischen Schriftzeichen von Anfang an problemlos, egal ob eingebettet oder nicht (obwohl ich nichts speziell zu fernöstlichen Schriftzeichen installiert hatte), während es testweise bei meinen Kollegen (die auch sehr "aktuelle Rechner" haben WinXP, Flash Player 8 usw.) die unterschiedlichsten Probleme gab: manchmal wurde gar nichts angezeigt, manchmal erschienen nur leere Rechtecke statt irgendwelcher chinesischer Schriftzeichen. Leider hat das mit dem Einbetten da nicht den erwarteten Erfolg gebracht. Ich weiß nicht, wie gut einzelne Flash Player-Versionen mit eingebetteten chinesischen Schriftzeichen umgehen können, so differenziert habe ich das dann nicht mehr getestet, weil mir irgendwann die Lust ausging.
Mit meinem Ansatz ist das aber eh alles hinfällig. Der Flash Player muss halt ein paar Bilddateien laden, mehr nicht.
Was man halt beachten muss:
- auf dem Server muss GD vorhanden und aktiviert sein
- ganz wichtig: es muss ein Truetype-Unicode-Font auf dem Server vorhanden sein (klar, irgendwo müssen die Zeichen ja hinterlegt sein). Man kann auch einfach einen hochladen (z.B. Arial Unicode MS) und dann in der PHP-Datei drauf verweisen; das habe ich so gemacht. Einziger Knackpunkt: zumindest die Arial Unicode MS hat 23MB.

Zitat von Sir Freako

die Idee ist gut

Freut mich, wenn es jemandem hilft oder auf neue Ideen bringt.

Gruß,

Thomas

Nachtrag: die obige Version funktioniert nur mit FP8, da png's generiert und geladen werden. Will man für frühere FP-Versionen entwickeln, dann kann man auf dem Server auch jpg's generieren.

[Sir Freako]

Hi Tomiko ,

rasche Antwort super - du bist wohl auch von der Sorte die sich am Wochenende
mit .as beschäftigen

Mit stellte sich nur die frage ob nicht derjenige der Chinesische Schriftzeichen benötigt auch normalerweise die entsprechenden truetype fonts in seiner FontLibrary installiert hat .

gäbe es auch eine möglichkeit die Gdtypes wie mit css zu stylen?
(würde sich als durchaus praktisch erweisen da der Editor od.Author freier in der Contentgestalltung währe )

du müßtest doch reintheoretisch nur die definitionsets in die Styledefinitionen einbringen od. verknüpfen
- hast du in diese richtung auch schon experimentiert ?

Ich habe jetzt nocheinmal nachgeschaut im WWW:

http://www.advogato.org/article/775.html

noch eine möglichkeit währe doch um in den vollen genuss des css-stylings zu kommen in der Htmlseite
den font zu laden und von Flash aus einfach die selbe fontfamily zu triggern- oder meinst du das lädt dann zu lang ?

Ich finde das experiment mit dem GDLIB schon sehr gut bloß ob es ohne css-support dann auch besonders funktionabel ist ?


grüße F

[thomiko]

Zitat von Sir Freako

Mir stellte sich nur die frage ob nicht derjenige der Chinesische Schriftzeichen benötigt auch normalerweise die entsprechenden truetype fonts in seiner FontLibrary installiert hat.

Davon gehe ich mal lieber nicht aus. Ich arbeite hier an der Uni, folglich sind die Sprachlernmaterialien vor allem für Studenten. Wenn sie zu Hause arbeiten, können sie ja selbst dafür sorgen, dass sie die entsprechenden Fonts haben, aber wenn sie an Uni-Computern arbeiten, sieht das schon anders aus.

Zitat von Sir Freako

gäbe es auch eine möglichkeit die Gdtypes wie mit css zu stylen?
(würde sich als durchaus praktisch erweisen da der Editor od.Author freier in der Contentgestalltung wäre)

Kann ich momentan ehrlich gesagt nicht beurteilen, da ich das erste Mal mit der GD arbeite und mich noch nicht mit allen vorhandenen GD-Funktionen vertraut gemacht habe (ich werde aber gleich mal das PHP-Manual ein bisschen durchpflügen). Momentan verwende ich die imagettftext-Funktion zm Setzen der Schriftzeichen. Hier ein Auszug aus dem PHP-Manual über diese Funktion:

---------------------------------------------------
imagettftext
(PHP 3, PHP 4, PHP 5)

imagettftext -- Erzeugt TTF-Text im Bild
Beschreibung:
array imagettftext ( int im, int size, int angle, int x, int y, int col, string fontfile, string text )

ImageTTFText() zeichnet den Text text in das per im angegebene Bild, beginnend bei den Koordinaten x und y (oben links ist 0, 0) mit einem Ausgabewinkel von angle in der Farbe col unter Verwendung der TTF-Datei, die mittels fontfile benannt wurde.

Die per x und y angegebenen Koordinaten definieren den Startpunkt des ersten Zeichens (in etwa die linke untere Ecke). Das ist anders als bei der ImageString()-Funktion, bei der x und y die obere rechte Ecke des ersten Zeichens darstellen.

Angle ist in Grad anzugeben. 0 ist eine normale Ausrichtung von links nach rechts (von 9 nach 3 Uhr). Höhere Werte entsprechen einer immer weiteren Drehung entgegen dem Uhrzeiger-Sinn. Eine Drehung von 90 Grad entspricht also einer Text-Ausrichtung von unten nach oben (von 6 nach 12 Uhr).

Fontfile ist der Pfad zur TTF-Datei, die Sie verwenden wollen.

Text ist der auszugebende String, der auch UTF-8-Zeichenfolgen enthalten darf (z.B. {)

Col ist der Farbindex. Verwenden Sie den negativen Index-Wert, führt das zum Aufheben des Farbüberlaufs (Antialiasing).
---------------------------------------------------

Zitat von Sir Freako

du müßtest doch reintheoretisch nur die definitionsets in die Styledefinitionen einbringen od. verknüpfen - hast du in diese richtung auch schon experimentiert ?

Nein, habe ich nicht. Ich weiß auch nicht ganz, was Du meinst. Kannst Du das bitte ein bisschen weiter ausführen?

Gruß,

Thomas

[darki777]

Sehr geiler Matrix-Effekt nur 6kb groß, und sehr 3D-haltig mit chinesischen Zeichen (unicode).

Matrix_FX

MfG darki

[thomiko]

Zitat von darki777

Sehr geiler Matrix-Effekt nur 6kb groß, und sehr 3D-haltig mit chinesischen Zeichen (unicode).

Hm, wenn ich mal kritisch sein darf:
1. Die von Dir angegebene Matrix-Animation läuft bei mir sehr ruckelnd (vielleicht weil ich mal wieder 5-10 Programme offen habe ), außerdem sind einige Zeichen sehr verwischt. Wahrscheinlich soll das so sein, ich finde es aber nicht so schön.
2. Die verwendeten Zeichen sind japanische Schriftzeichen. Auf den ersten und zweiten Blick würde ich sagen, dass es sich dabei nur um Hiragana und Katakana handelt. Im Japanischen gibt es diese beiden Silbenschriften sowie Kanji (aus dem Chinesischen importierte Zeichen, wobei jedes Zeichen für eine begriffliche Einheit steht: Tisch, Stuhl, Liebe, laufen ...) und Romaji (Zeichen des lateinischen Alphabets). Die beiden Silbenschriften haben im Gegensatz zu den Kanji nur ein sehr begrenztes Zeicheninventar (siehe die obigen Wikipedia-Links), deswegen benötigt ihre Einbindung viel weniger Speicherplatz.

Gruß,

Thomas

[darki777]

Ruckelnd deswegen, weil es nur rein AS gescriptet ist, deswegen die nur kleine Größe von 6kb, das hat nix mit den schriftzeichen zu tun, man könnte genauso tausend verschiedene von den chinesischen reinbaun, nachteil = noch mehr rechenarbeit für die CPU = noch mehr ruckler :/

[thomiko]

Zitat von darki777

Ruckelnd deswegen, weil es nur rein AS gescriptet ist, deswegen die nur kleine Größe von 6kb, das hat nix mit den schriftzeichen zu tun, man könnte genauso tausend verschiedene von den chinesischen reinbaun, nachteil = noch mehr rechenarbeit für die CPU = noch mehr ruckler :/

Wenn Du aber tausende chinesische Schriftzeichen einbettest, dann hast Du genau das Problem dieses Threads:
- wenn Du es einbettest, dann wird die Dateigröße massiv größer und es wir trotzdem nicht immer richtig angezeigt.
- wenn Du es nicht einbettest, sehen die Leute ohne entsprechende Fonts auf ihrem Rechner gar nüscht.

Gruß,

Thomas

[Sir Freako]

Zitat von thomiko

Nein, habe ich nicht. Ich weiß auch nicht ganz, was Du meinst. Kannst Du das bitte ein bisschen weiter ausführen?

Gruß,

Thomas

Hi Thomas ,

Ich meinte das es sich auch als durchaus praktisch erweisen würde wenn man ggf. noch eine Bold Version des Font in deinem GD Script bereitstellt.

Wie in deinem Beispiel ersichtlich und auch schon Ladezeitenoptimiert pickst du dir ja nur die Fonts heraus die du gerade benötigst , was ja auch definitiv Sinn macht bei einem Fontset von ca 3000 Zeichen.

Benutzt du html Markup um den Text einzuspeisen wohl schon oder?

Dann müßte es doch auch möglich sein Buchstaben die zB. von dem <bold> tag umgeben sind auch an der richtigen Stelle als bold mit GD auzugeben genauso wie du Links auch farbig machen könntest.

zB mit einer delimitter funktion wenn '<' auftritt kann es sich ja eigentlich nur um eine aHref oder ein Bold Tag handeln also mit substring entweder ab dem vierten oder fünften Buchstaben abschneiden den String auswerten dann wüsste man schoneinmal um was für eine Art tag es sich handelt.
wenn '<' zum zwiten mal auftritt mußt du halt die equation ausweiten und nach /bold oder /aHref suchen um die terminierung festzustellen.
Diese ganzen Infos in einem Array ( Zeichenlängen zwischen den Tags ,welcher tag , etc ) speichern dynamisch zB. einen xml file in php generieren in dem alle tag abschnitte der reihe nach gespeichert sind um es dann nach dem Gd prozedere wieder in dieser Reihenvollge zusammenzusetzen.

( ich denke gerade nur laut darüber noch wie man einen Algorightmus entwickelt der HtmlMarkup auswertet und mit deinem GD Lib verfahren in Flash sozusagen Ladezeitenoptimiert eigebettet ausgibt wieder als Html Markup).

grüße m@

[thomiko]

Zitat von Sir Freako

Ich meinte das es sich auch als durchaus praktisch erweisen würde wenn man ggf. noch eine Bold Version des Font in deinem GD Script bereitstellt.

Kommt drauf an, ob es bold-Versionen von Unicode-Fonts gibt!? Ich weiß auch nicht, ob das für chinesische Schriftzeichen überhaupt Sinn macht. Für andere Sprachen/Schriften muss man halt die bold-versionen zur Hand haben und dann an der entsprechenden Stelle im GD-Skript drauf verweisen.

Zitat von Sir Freako

Wie in deinem Beispiel ersichtlich und auch schon Ladezeitenoptimiert pickst du dir ja nur die Fonts heraus die du gerade benötigst.

ja, ein Font und fünf Schriftgrößen.

Zitat von Sir Freako

Benutzt du html Markup um den Text einzuspeisen wohl schon oder?

Vom Server zu Flash? Nein. Es sind ja Bilddateien, die vom Server kommen. Jede Bilddatei wird dann in einen MC geladen und diese MCs werden dann "aufgereiht".

Zitat von Sir Freako

Dann müßte es doch auch möglich sein Buchstaben die zB. von dem <bold> tag umgeben sind auch an der richtigen Stelle als bold mit GD auzugeben genauso wie du Links auch farbig machen könntest.

Meinst Du mit "von dem <bold> tag umgeben" den Text, der von Flash an den Server geschickt wird? Wenn ja: klar, Du kannst ja das Schriftzeichen auf dem Server gestalten, wie Du willst, Farbe, Neigungsgrad ... für eine Unterstreichung malst Du einfach eine Linie drunter.

Gruß,

Thomas