IE7, bicubic interpolation – nicht immer!

Im Internet kann man feststellen, dass viele Microsoft Fans begeistetr darauf reagiert haben, dass der IE7 mit Opera bzgl. der Skalierung von Webseiten und Ihrer Inhalte gleichgezogen hat. Ein Schlagwort in diesem Zusammenhang ist die bikubische Interpolation – für Numeriker und Physiker ein uralter Hut, mit dem jetzt halt auch Browser ausstaffiert werden.

Dagegen gibt es an und für sich nichts zu sagen. In der Praxis kann man aber das Verfahren der bikubischen Interpolation nicht immer “blind” einsetzen, und leider ist die Implementierung von MS auf den zweiten Blick auch nicht intelligent genug. Ein schönes Beispiel hatten wir vor kurzem, als wir auf einer Webseite Bilder aneinander gereiht haben, die vom Bildinhalt her nahtlos ineinander laufen. Realisierung z.B. mit Container-DIV und gefloateten Images. Nun möchte man diese Nahtlosigkeit gerne auch im Browser sehen – und dort auch nach einer Skalierung des gesamten Seite (Strg +).

Ergebnis in Opera: Kein Problem.
Ergebnis im IE7: In der Normalansicht (keine Skalierung) kein Problem. Bei einer Vergrößerung der Browseransicht mit “Strg +” wird aber offenbar jedes Bild einzeln bikubisch interpoliert. Dies führt im Ergebnis zu klar erkennbaren Rändern und manchmal sogar transparenten Zwischenräumen zwischen den Bildern. Das Hindurchschimmern des Hintergrundes kann man durch “margin:-1px” künstlich beheben. Die durch die Interpolation erzeugten minimalen Randstreifen jedes Bildes verschwinden jedoch nicht.
Ganz schlimm wird die Sachen, wenn die Bilder in einzelnen aneinander grenzenden Tabellenzellen untergebracht werden – obwohl die Bilder die Zellen ausfülllen, cellspacing, cellpadding, border auf 0 bzw. im Falle von CSS “border-collapse” etc. richtig gesetzt sind.

Das wird z.B. dann sehr unangenehm, wenn man Bilder verwendet, um den Rand eines Bereichs schön zu gestalten – z.B. mit abgerundeten Ecken. Die auftretenden Streifen zwischen den Bildern trüben die mühsam erarbeiteten Effekte sehr.

Woran liegt das? Nun, MS interpoliert die Bildern anscheinend einzeln. Bikubische Interpolationen sind an (scharfen) Rändern problematisch (Überschwingen). Hier muss man mit der Vorgabe der Randwerte aufpassen und den Rand ggf. einer Sonderbehandlung unterziehen, oder in der Nähe des Randes das Interpolationsverfahren wechseln. In der Regel der Vergleich mit Umgebungsdaten außerhalb des Randes. Im MS IE7 wird das leider nicht automatisch gemacht.

Es gibt aber eine Lösung:
Microsoft hat mit der Einführung der bikubischen Interpolation dem Anwender die Möglichkeit gelassen, per CSS-Anweisung auch ein anderes Interpolationsverfahren zu wählen. So gibt es zwei mögliche MS-spezifische CSS-Anweisungen:

-ms-interpolation-mode:bicubic
oder
-ms-interpolation-mode:nearest-neighbor

Bei Bildern, die man also auch nach einem Strg + nahtlos und ohne Randeffekte aneinandergehängt sehen möchte, muss man dem -Tag der aneinandergrenzenden Bilder halt ein
style=”-ms-interpolation-mode:nearest-neighbor” mitgeben. Dann funktioniert die Sache – leider auf Kosten der Interpolationsqualität.

Compiz-Fusion – besser als Beryl?

3D-Compiz

Nach dem Verschmelzen des Beryl-Projektes mit Compiz habe ich damals die Version 0.65 von Compiz-Fusion ausprobiert. Ich war eher enttäuscht. Sehr schlecht fand ich den überdeutlichen Tearing Effekt an den vertikalen Seiten von Wobbling-Windows. Die Einstellung zur VBlank-Synchronization, die man im Compiz-Fusion-Einstellungsdialog vornehmen konnte, zeigte in meiner Version leider auch keinerlei Wirkung. Jedenfalls nicht bei Verwendung der nativen Nvidia-Funktionen zur 3D-Deskop Unterstützung.

Das schien mir unter Beryl viel besser gelöst. (Die Methoden zur Synchronisation mit der Vertikalfrequenz der Grafikkarte sind offensichtlich in Beryl und in Compiz verschieden.)

Hinzu kamen danach dann größere Probleme mit dem x86_64_169-Treiber von Nvidia. Ich bin dann für ein paar Monate wieder auf das alte Beryl umgestiegen.

Inzwischen hat sich jedoch an Compiz-Fusion Einiges verbessert und es gibt Positives zu berichten:

  1. Die Option zur Vertikalsynchronization zeigt Wirkung. Der Tearing-Effekt für die Vertikalseiten lässt sich damit deutlich reduzieren. Insgesamt leidet dann jedoch die Performance beim Drehen des Würfels spürbar – im Besonderen dann, wenn mehr als 4 Würfelseiten vorhanden sind. Die Option “Loose-Binding” zeigt dann manchmal positive Wirkung. Die Verhältnisse sind jedenfalls so, dass man damit leben kann.
  2. Mir gefallen der neue Einstellungsdialog und etliche der neuen Optionen inzwischen sehr gut.

Also im Moment lohnt es sich wieder mit dem 3D-Desktop zu spielen, wenn man dafür Zeit erübrigen kann. Ein kleiner Augenschmaus ist das allemal.

Weboutput von PHP in Datei umlenken

Problemstellung
In einem unserer letzten Projekte stellte sich das Problem, den Output eines PHP-Programms – eine Webseite – nicht per HTTP zu einem Browser zu transportieren, sondern parallel auch als Datei wegzuschreiben. Die Webseite wurde auf Basis eines TPL-Templates erzeugt.

Lösungsansatz
Nun könnte man meinen, dass man hierzu in komplizierter Weise neben den Befehlen zum Füllen des Templates parallel fwrite-Befehle absetzen muss. Es geht jedoch viel kompakter und einfacher, indem man den Output puffert und die gepufferten Strings in die gewünschte Datei schreibt.

Diese Lösung haben wir ”’Jani Hartikainen”’ zu verdanken und in seinem Blog gefunden.

Lösung
Zu benutzen sind die Funktionen ob_start() und ob_end_flush(). Die Funktion ob_start() akzeptiert einen optionalen Parameter für eine callback-Funktion und hier setzt das Verfahren an.

Wir zeigen das an einem einfachen Beispiel, nämlich den letzten Zeilen des Codes zum Füllen eines ITX-Templates


function generate output () 
{
  // letzter Schritt im template, z.B. Anzeige von Warnungen und Fehlern    

  $template->setCurrentBlock("ERROR_VA");
     $template->setVariable("ERR_VIS", $vis_error); 				
     $template->setVariable("ERROR_MSG", $error_msg); 			
  $template->parseCurrentBlock();

  // Öffnen eines Files 
  $ob_file = fopen('output.html','w');

  // Pufferung unter Rückgriff auf die callback-Funktion aktivieren 
  ob_start('ob_file_callback');
		
  // Der Output - nämlich in diesem Fall die aus dem Template HTML-Datei wird in den Puffer gelenkt 
  $template->show();

  // Pufferung beenden und File schließen 		
  ob_end_flush();
  fclose($ob_file);
  exit;
}

function ob_file_callback($buffer)
{

  global $ob_file;                       // hier kann man über das Erstellen einer Klasse viel verbessern 
  fwrite($ob_file, $buffer);        // Umlenken des Puffers in die Datei output.html

  // Das nachfolgende Return-Statement sorgt dafür, dass der Output gleichzeitig auch auf dem Browser-Schirm  zu sehen ist. 
  return $buffer;

}

Verbesserungen
Dieses Beispiel verdeutlich nur das Prinzip. Jani Hartikainen beschreibt in seinem Blog-Artikel, wie man das Vorgehen in einer Klasse kapselt. Der geschätzte Leser möge sich dort bitte weiter informieren.