molily: Howto: Popups mit JavaScript

Beitrag lesen

Hallo, Calocybe,

Bin begeistert, muss ich sagen. In klarem Deutsch geschriebener Text (ok, ein paar Rechtschreibfehler sind drin), der das Problem genau richtig angeht.

Freut mich. :) Wäre nett, wenn du mir schwerwiegende Fehler, die die aufgefallen sind, mailen könntest. Denn entweder finde ich sie nicht (nie), weil ich sie übersehe oder ich bin mir dessen nicht bewusst, was auf das Gleiche herauskommt.
Und komme mir nicht mit Groß/Kleinschreibung, die neue Rechtschreibung legitimiert jede Abweichung von der Regel. ;) Oft können wie gesagt Tippfehler oder HTML Entity-Murks auftreten.

Nur solltest Du vielleicht noch unterbringen, dass man die Popups, wenn man es denn nicht lassen kann, wenigstens resizable und mit Scrollbar machen soll.

Ist notiert und ich werde den Hinweis aufgreifen und mit einbeziehen.

Apropos Schriftgroesse, dass Du diese einfach auf 80% verkleinerst, nehme ich Dir dann aber uebel. Das ist fuer laengere Texte absolut nicht akzeptabel. Das letter-spacing macht die Sache nicht besser. Das ist zwar nicht ganz so schlimm wie die Schriftverkleinerung, aber fuer Fliesstext ist davon generell abzuraten.

Ja, dieses Problem belastet schon seit geraumer Zeit mein Gewissen, das nehme ich mir selbst schon fast übel. Für Fließtext sollte man die Schriftgröße 1em benutzen, also die Browservorgabe, die der Benutzer als Maßstab festgelegt hat, das ist gewiss.
Das letter-spacing sollte eigentlich nur das Schriftbild auflockern und den Text "öffnen", also den Grauwert erhellen, nicht die kleinere Schriftgröße kompensieren... Wie du siehst, habe ich eine kuriose Einheit für das letter-spacing benutzt: 1px, denn 0.05em o.ä. schien mir unpassend und funktioniert nur auf ausgewählten Browsern, und prozentuale Angaben unterstützt kein Browser, bin mir nichtmal sicher ob sie in diesem Falle erlaubt sind.
Mal im Ernst, hast du das mit den 80% gemerkt, weil die Schrift dir zu klein und unleserlich/augenstrapazierend erschien oder weil du es im Code gelesen hast...? Vielleicht erklären folgende Erläuterungen etwas mein Anliegen.

Erst einmal ist der ganze Spuk nur für grafische Browser; indem ich CSS, am besten extern, benutze, sind grundlegende Probleme der Interoperabilität und Zugänglichkeit erst einmal gelöst, denn jede CSS-Formatierung ist optional und soll nur die logische Strukturierung hervorheben. Selbst wenn ich komplizierte Navigationen mit CSS spinne, müssten sie auch ohne Stylesheets problemlos benutzbar sein. Meist spiele ich mit durch CSS versteckten Seiteninhalten, beispielsweise Trennzeichen zwischen Links, wenn du die WCAG kennst, weißt du wovon ich spreche.

IMHO ist es unter anderem ein "Problem" der benutzten Schriftarten. Natürlich programmiert man nur nach Schriftarttypen (serif, sans-serif, monospace, fantasy etc.), aber ich möchte zur typographischen Gestaltung die Schriftart Verdana nicht missen, ich finde sie lesbar und einfach "ästhetisch". (Arial/sans-serif finde ich hingegen viel zu steril und Times New Roman/serif erscheint mir oft charakterlos, als hätte man die Schriftart nicht bewusst gewählt, als wäre sie nur default-Einstellung und nicht Teil der Komposition, auch wenn sie sich für Fließtext geradezu anbietet aufgrund ihrer Lesbarkeit.)
Dies ist ein optionales Feature meiner Seiten, was bei einer großen Mehrheit der Benutzer funktioniert, denn sie nutzen Windows und Verdana ist installiert. Die Benutzbarkeit meiner Seiten schränkt es sicher nicht ein, wenn diese Schriftart nicht vorhanden ist - oder doch?

Als den Seitencharakter prägendes Gestaltungselement wirft es jedoch das Problem auf, dass Verdana eine im Vergleich zu den Schriftarttypen, welche als Ersatz auf Nicht-Windows-Systemen eingesetzt werden, andere Größenrelation hat. D.h. der Platz, den ein Zeichen bei gleicher Schriftgröße in Times New Roman, Arial und Verdana einnimmt, ist völlig unterschiedlich, ebenso das Verhältnis von Buchstabenbreite und Buchstabenhöhe. Deswegen nutze ich den Workaround Schriftgröße 0.8em für Fließtext (p, ol, ul, dl etc.) nur, um die vergleichsweise wuchtige Schriftart Verdana so zu verkleinern, dass sie ungefähr bei 80%iger Größe der 100%igen Größe anderer Schriftarten bei gleicher Schriftgröße entspricht. Nur so kann ich auf einem durchschnittlichen Bildschirm die gewünschten Informationen präsentieren. Bei einem simplen "hängenden" Layout wie beim Howto kann man das natürlich noch eventuell vernachlässigen.

Irgendwann ist meines Erachtens das Argument der grenzenlosen Skalierbarkeit in alle Richtungen ausgereizt, nämlich wenn es um komplexere Layouts und deren Benutzbarkeit geht. Angenommen man hat die Voraussetzungen 640x480 Pixel Bildschirmauflösung (eingeschränkt durch Menü-, Symbol- und Adressleisten) und 12pt entspricht 1em (bei 96 dpi). Wenn man nun ein Layout wie folgendes http://home.t-online.de/home/dj5nu/sterne.html etablieren möchte, dann muss man (der Seitenautor) ggf. die Schriftgröße anpassen (!=1em), damit man überhaupt Navigation/Inhaltsverzeichnis und Seiteninhalt nebeneinander darstellen kann. (Dies gilt insbesondere wenn man Verdana als dominierenden Schrifttyp benutzt, was im Beispiel für mich eigentlich der Hauptgrund war.)
Schlimm, aber wahr; ich möchte behaupten, dass aus gleichem Grund 90% der Webseiten einerseits immer kleinere Schriftgrößen benutzen als die Benutzervorgabe, nämlich oft 8-10pt für Fließtext und dass dies andererseits zusammengeschüttelt mit Tabellenlayout einen lethalen Cocktail für die Skalierbarkeit darstellt. Dennoch hat dieses pixelgenaue Layout den Vorteil, dass es durch eine Festbreite von vielleicht 750 Pixeln interoperabler scheint als so manche CSS-Lösung. Da sich die Größenverhältnisse (Text, Bilder) nicht einer Veränderung der Bildschirmauflösung anpassen, scheitert jeder Versuch von Komposition schon im Ansatz. Schließlich gibt es keine Schriftgrößeneinheit für Prozent der Fensterbreite usw.
Da fällt mir nur so ein automatischer Javascript-Zoom ein, der beim IE den Fensterinhalt an die Fenstergröße anpasst über die proprietäre CSS-Eigenschaft zoom.

Denn wie kann ich feststellen, ob der Text XYZ in der Größe 1em und in verschiedenen Schriftarten nicht breiter ist als die Navigationsbox, welche 20% oder meinetwegen 15em breit ist? Wie soll das Layout bei gleichbleibender em-Vorgabe, aber kleiner oder größer werdender Bildschirmauflösung funktionieren? Richtig, die Lösung ist: man arbeitet wieder mit absoluten Angaben, aber dann könnten wir auch wieder mit Tabellenlayout anfangen, oder noch besser, Frames. Denn das skaliert so wie Opera Seiten vergrößert.

Da ich in einem CSS-Layout nur mit relativen Angaben wie em oder Prozent arbeiten kann, muss ich die Schrift so zusammenstauchen, dass sie - unter besonderer Berücksichtigen der gewählten Schriftart das Layout nicht sprengt, was in einem gewissen Sinne feststehend sein muss.

Ich sehe da keine Möglichkeit, dem Teufelskreis zu entrinnen. :) Bisher bin ich durch die wirklich Geheimnisse des CSS-Layouts eingestiegen, d.h. ich habe es nie perfekt hinbekommen.
Ich habe Probleme damit, zu einem Tabellenlayout (nicht statisch) ein CSS-Äquivalent zu erstellen, bei dem die Vorteile im Bezug auf klare und interoperable Seitenstrukturierung gegenüber der Tabellenversion überwiegen.

(Das sollte alles nicht rechtfertigen, ich werde die Schriftgröße trotz Verdana auf 1em setzen.)

Die Ueberschriften wuerde ich nicht in der Art "Die Lösung, erster Versuch: ..." nennen [...]

Verstehe schon, hatte ich auch geplant. Gerade fiel mir beim Formulieren des Inhaltsverzeichnissen auf, dass die Überschriften doch eindeutiger sein sollten, damit die Struktur klarer wird.

Besonders gefaellt mir auch der Absatz ueber die "Zurschaustellung von möglicherweise geheucheltem Problembewusstsein" ;-)

Hoffentlich versteht man, was ich meine. Ich finde solche Hinweise ansonsten völlig albern, aber "man will ja niemanden auf die Füße treten" - für mich ist das fast schon die höchste Stufe des P.C.-Alarms. Wer glaubt, man könne durch Anhängen von "Innen" an Wörter patriarchalische Strukturen zerschlagen, beruhigt und betrügt sich nur selbst - oder will andere beindrucken. Deswegen "möglicherweise geheuchelt". Wenn der erste "Sexist" schreit, kichere ich mir amüsiert, aber auch enttäuscht-seufzend, ins Fäustchen.

Mathias