Just updated to 3.3 and still flickering

[GoogleCodeExporter]

All the websites of my clients have that flicker and I don't know how to get 
rid of it.

What steps will reproduce the problem?
1. Check out my own website www.binarykitchen.com
2. Click on reload in your browser and observe the text rendering
3. You see a flicker about 500ms after the reload

What is the expected output? 
I expect no flicker to make the user experience comfortable.

What do you see instead?
The flicker

What version of the product are you using? On what operating system?
Firefox 4 on Windoze 7

Original issue reported on code.google.com by michael....@gmail.com on 16 May 2011 at 3:51

[GoogleCodeExporter]

Hi Michael

Thanks for the feedback. It's an interesting question and requires some deeper 
understanding of how Hyphenator.js works:

As soon as the DOMContentLoaded-event is fired, Hyphenator.js gathers all text 
elements to be hyphenated, hides them, hyphenates them and finally unhides them.
With this technique the browser does only one redraw instead of multiple for 
each element which is faster.

By including the script at the bottom of the page you circumvent this gimmick.

To solve the described issue, try to include Hyphenator.js on top of the file. 
So it will already be loaded and ready when DOMContentLoaded occurs. The text 
will not display until it is hyphenated and the flicker should be gone…

I know, including scripts at the bottom is known as 'good practice' but this 
doesn't hold in the case of Hyphenator.js

You may also look at the config property 'intermediatestate' 
(http://code.google.com/p/hyphenator/wiki/en_PublicAPI#property_intermediatestat
e). If set to 'visible' (default is 'hidden') the text will not be hidden but 
stay visible: no flicker but multiple redraws and text refloatings will happen 
which IMHO are even worse.

I haven't documented this, yet. Please excuse the inconvenience.

Fründlichi Grüess uf di ander Siite vo dä Chuglä,
Mathias

Original comment by mathiasn...@gmail.com on 16 May 2011 at 2:25

• Changed state: Accepted
• Added labels: Type-Task
• Removed labels: Type-Defect

[GoogleCodeExporter]

Needs documentation in 'How to Use Hyphenator.js' and in the FAQs

Original comment by mathiasn...@gmail.com on 16 May 2011 at 2:25

[GoogleCodeExporter]

Thanks. But I'm afraid, it doesn't work. I moved the script to the top and 
still see the flicker. No difference if the script is on top or bottom.

Right, I don't want to try "intermediatestate" for multiple redraws.

Maybe another trick would work: A CSS solution to hide all containers with the 
class hyphenate with visibility:hidden and remove that CSS property when done. 
What do you think?

Grüsse von Down Under
Michael

Original comment by michael....@gmail.com on 17 May 2011 at 1:40

[GoogleCodeExporter]

The script is at the top but you invoke it at the bottom ;-)

Put 'Hyphenator.run();' just after where the script is loaded.
Also try to use 'mergeAndPack' 
(http://hyphenator.googlecode.com/svn/tags/Version%203.3.0/mergeAndPack.html) 
to merge patterns and script (saves a request) and to pack all together for a 
smaller file…

> Maybe another trick would work: A CSS solution to hide all containers with 
the class hyphenate with visibility:hidden and remove that CSS property when 
done.

That's actually what the script does.

Original comment by mathiasn...@gmail.com on 18 May 2011 at 7:52

[GoogleCodeExporter]

Danke vielmals für deine wertvollen Tips. Ich hab 'mergeAndPack' versucht und 
dabei die Option 'Enable remote loading of language patterns.' deaktiviert.

Leider sehe ich neue Probleme, wenn ich www.binarykitchen.com aufrufe:

- Das Flackern ist immer noch da.
- Mit Firebug sehe ich dass ganz kurz en-US.js geladen wird und dann entfernt 
wird. Echt komisch.

Skript ist im Header und Hyphenator.run() wird im Hyphenator Skript gleich 
aufgerufen.

Dann noch etwas anderes: Wenn ich nach 'mergeAndPack' mit ausgewählte Sprachen 
den Source-Code anschaue, sehe ich einen ultralangen Array supportedLang ganz 
am Anfang. Der wäre dann eigentlich überflüssig. Ich brauche kein Bengali im 
Code :) Vielleicht lässt sich da weiter optimieren indem Code reduziert wird?

Original comment by michael....@gmail.com on 19 May 2011 at 9:31

[GoogleCodeExporter]

Hallo Michael

Vielen Dank für deine Ausdauer. Ich versuche momentan den Fehler einzugrenzen.
Eigentlich sollte das Script so funktionieren, dass Texte, die getrennt werden, 
anfänglich nicht sichtbar sind und erst erscheinen, wenn die Silbentrennung 
vollzogen ist.

Du hast jetzt die Muster für Britisches English eingebunden (en-gb). Im HTML 
steht aber nur 'en', was von Hyphenator.js als en-us interpretiert wird. 
Deshalb werden die US Englischen Muster geladen.
Also entweder lang="en-gb" im HTML oder die 'en-us' patterns verwenden.
Das behebt aber das Problem noch nicht…

Es scheint, dass irgendeine Inkompatibilität mit den anderen Scripts auf 
deiner Seite besteht. Wenn ich die Scripts am Seitenfuss auskommentiere ist das 
Flackern zwar weg, aber die Texte werden von Anfang an angezeigt (so als wäre 
intermediatestate='visible'), was auch nicht sein sollte.
Kannst du das nachvollziehen?

> […] sehe ich einen ultralangen Array supportedLang ganz am Anfang. Der 
wäre dann eigentlich überflüssig. Ich brauche kein Bengali im Code :) 
Vielleicht lässt sich da weiter optimieren indem Code reduziert wird?

Ja, ist möglich, aber z.Z nur manuell. Du kannst die Objekte 'supportedLang' 
und 'prompterStrings' getrost kürzen.
Eine modularisierte Form von Hyphenator ist in Arbeit, aber noch nicht 
Einsatzfähig. 
(http://code.google.com/p/hyphenator/source/browse/#svn%2Fhyph_module)

Ich bin wirklich sehr interessiert, das Problem zu finden und zu lösen. Dein 
Feedback ist mir sehr wertvoll.

Original comment by mathiasn...@gmail.com on 19 May 2011 at 10:28

• Added labels: Type-Defect
• Removed labels: Type-Task

[GoogleCodeExporter]

Auch ich möchte diese Probleme lösen und solange ich was lerne, macht's Spass 
:)

Nun hab ich lang auf "en-gb" gesetzt und nun klappts, en-US.js wird nicht mehr 
nachgeladen.

Wegen 'supportedLang' und 'prompterStrings', diese erscheinen im Code an mehre 
Orten und ich mag da lieber nicht manuell optimieren und warte gerne auf die 
modularisierte Form. Wann denkst du ist es soweit?

Und nun zum Hauptthema, das liebe Flackern. Ich hab auch versucht, das Problem 
auszugrenzen und folgendes versucht:
- Output Buffering + Gzip in PHP deaktiviert
- Alle andere JavaScripts entfernt
- Komplettes CSS entfernt
- Komplette Cache-Mechanismen im htaccess wie z.B. ETags entfernt

Alles klappt nicht. Dann hab ich mit HttpFox die einzelnen GET-Requests 
analyisiert und folgendes gefunden: Die HTML-Datei wird zweimal geladen, einmal 
ganz am Anfang und das zweite Mal ganz am Schluss. Lad dir mal dieses Firefox 
Addon herunter, dann siehst du es auch.

Hmmmm, keine Ahnung woran das Flackern wirklich liegt. Auch auf meinen anderen 
Webseiten, z.B. www.deafzone.ch kommt das Flackern vor.

Vielleicht kannst du mir da weiterhelfen? Ich hoffe sehr ...

Gruss,
Michael

Original comment by michael....@gmail.com on 19 May 2011 at 12:28

[GoogleCodeExporter]

Hallo Mathias

Hast du inzwischen schon etwas herausgefunden?

Einige meiner Kunden beschweren sich über das Flickern. Wenn ich es nicht bald 
lösen kann, dann muss ich leider den Hyphenator deaktivieren ...

Gruss,
Michael

Original comment by michael....@gmail.com on 27 May 2011 at 12:55

[GoogleCodeExporter]

Nein, leider nicht.

Das Debugging gestaltet sich etwas kompliziert und mir fehlt die Zeit.
Vielleicht ist es tatsächlich das beste, wenn du Hyphenator.js solange 
deaktivierst.

Original comment by mathiasn...@gmail.com on 28 May 2011 at 8:47

[GoogleCodeExporter]

OK, ich hab's für all meine Webseiten deaktiviert und hoffe, eines Tages 
findest du den Grund ... ich werde die weiteren Versionen mit grosser Neugier 
verfolgen und danke dir sehr für deinen tollen Einsatz bisher!

Gruss,
Michael

Original comment by michael....@gmail.com on 29 May 2011 at 12:01

[GoogleCodeExporter]

Original comment by mathiasn...@gmail.com on 25 Apr 2013 at 8:19

• Changed state: WontFix