Text in Layer - Seite 2

Stümper · 21.02.2005, 20:51

so, ich habe jetzt ein Mass gefunden, das für alle mac fähigen Browser geht (Safari, Firefox für Mac, IE für Mac). Courier, font-variant: small-caps. Sieht cool aus.

Auf dem Windows PC leider beschissen.

Sind Schriften Platformspezifisch? Dann muss ich mir ja eigentlich nur eine gute PC Schrift suchen und eine Weiche für Mac und PC bauen (PHP).

Oder wie würdest du das Problem der verschiedenen Darstellung durch verschiedene Browser angehen?

agrajag · 21.02.2005, 20:57

Zitat:

Zitat von Stümper

ich habe aber die Erfahrung gemacht, dass Schriften besser aussehen, wenn man sie in pt ausgibt. Bei pixeln wirkt die schrift oft rauh und unförmig.

Vielleicht ist die Schrift für die in pt angegeben Grössen optimiert?

Nein.

Ich schätze, du bildest dir das "besser aussehen" nur ein. Wo tritt der Effekt auf (OS, Browser, Quelltext)?

Warum pt eine ganz schlechte Einheit für Bildschirmdarstellung ist, kannst du unter anderem hier nachlesen:
http://www.dciwam.de/faq/gute-websites/einheit-pt

Zu deinem eigentlichen Problem:
Was ist so schlimm an einem Rollbalken oder daran, dass sich die Box einfach vergrößert wenn es nötig ist?

21.02.2005, 21:03

Zitat:

Sind Schriften Platformspezifisch? Dann muss ich mir ja eigentlich nur eine gute PC Schrift suchen und eine Weiche für Mac und PC bauen (PHP).
Oder wie würdest du das Problem der verschiedenen Darstellung durch verschiedene Browser angehen?

Naja, Schriften gibt es ja immer (meistens) auch für andere Systeme.
Ich weis jetzt nicht mehr so genau, glaube aber das MAC mit 96dpi auf dem Monitor arbeitet, und der PC-Moni mit 72dpi.
Aus einen anderen Fachgebiet weis ich, dass es hier teilweise große Unterschiede bei gleichen Schriftarten gibt.

Wenn du natürlich auf Courier-Style aus bist, dann suche die beste (rein optisch gesehn) für den PC aus.
Courier gibt es hier in unterschiedlichen Varianten, und wird leider von MAC zu PC sehr unterschiedlich dargestellt.

Bei Webanwendugen ist aber so eine sache, wo man ein Kompromiss wählen muss.
Hier kann man es leider auch nicht jedem Recht machen.
Und durch die Pixeldarstellung auf einen Monitor, wird man nie eine saubere Schrift (in Texten) hinbekommen.
Schriften werden immer "gebrochen" dargestellt.

Stümper · 21.02.2005, 21:53

@Werbegeschenk
ein Rollbalken sieht einfach beschissen aus, weil ich eine Hintergrundgrafik verwende, die einen Bereich hat, um Text anzuzeigen. Selbstverständlich tritt der Effekt im Browser auf.

@CIX88
ich muss wohl einfach ausprobieren. Wenns auf dem Safari toll aussieht, siehts auf dem PC meist nicht so gut aus. Leider.

toscho · 22.02.2005, 09:12

Gib die Breite der Box in der Einheit »em« an, und die Schrift darin als Festbreitenschrift. Geh dabei nicht unter 1em – die Größe, die sich deine Leser als »gut lesbar« eingestellt haben.
Ansonsten wird jede Berechnung garantiert schief gehen.

Im Ganzen halte ich deinen Versuch für unsinnig. Du kannst keine unbekannte Größe (Schrift) auf eine bekannte (Bild) abbilden. Was, wenn jemand die Seite mit 20px Schriftgröße betrachtet? Zerlege das Bild lieber und bau einen Rahmen daraus um den Text, der sich an den Inhalt anpaßt.

Und »Courier« ist auf Windows eine Bitmapschrift, natürlich sieht die in den meisten Fällen schrottig aus. Eine Alternative wäre eventuell »Courier New«, aber auch die ist nicht besonders schön.

Stümper · 22.02.2005, 15:31

@toscho
du hast mit deiner Bemerkung eigentlich Recht, nur: ich habe eine Hintergrundgrafik fester Grösse und möchte eine bestimmte Anzahl Zeichen in einen bestimmten Bereich schreiben. Was also bleibt mir anderes übrig, als eine Schrift zu nehmen, die so gut lesbar ist, dass sich weiteres Zoomen erübrigt?

Wie meintest Du das mit dem Zerschneiden der Grafik? ist sie dann skalierbar? Sind Hintergrundbilder überhaupt skalierbar?

In punkto Webdesign habe ich so gut wie gar keine Erfahrung. Aber eben: aus Fehlern lernt man ...

toscho · 23.02.2005, 05:26

Es geht überhaupt nicht ums Zoomen, sondern darum, daß schon die Ausgangsschriftgröße zu groß sein kann. Praktisch alle Browser bieten eine Möglichkeit an, Mindestgrößen zu setzen oder deine Größenvorschläge komplett zu ignorieren. Dem muß dein Layout standhalten, sonst ist es nicht webtauglich.

Ein Ausweg wäre eben das Zerlegen: Du setzt Ecken und Rahmen als einzelne Hintergrundbilder um die Textbox, so das also die Position der linken oberen Ecke unabhängig ist von der der rechten unteren. Dazu brauchst du vermutlich mehr CSS (»float«!) und Markup als jetzt und mußt ein bißchen um diverse Implementationshürden herumbasteln, aber grundsätzlich geht das.

Ich habe sowas schon selbst gemacht, bzw. machen müssen, halte es aber eigentlich noch nicht für praxistauglich. Man steckt zuviel Arbeit hinein, bekommt nie ein wirklich perfektes Ergebnis und mutet dem Leser einen Haufen eigentlich unnötiger Requests zu.

Dennoch ist es eine schöne Übung, bei der du viel lernen kannst.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JavaScript/PHP: qooxdoo 0.7.1 - Teil 1 : Eine Einführung	Zergling-new	Tutorials	6	25.01.2008 10:41
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
MySQL-Volltextsuche	SvenLittkowski	Datenbanken	6	14.06.2007 19:58
spalte rechts ausrichten, text aber trotzdem linksbündig	Crypi	HTML, Usability und Barrierefreiheit	5	14.09.2006 11:35
div layer - text über ende hinaus	seejay	HTML, Usability und Barrierefreiheit	4	24.01.2006 13:05
CSS - Design (clear - Problem)		HTML, Usability und Barrierefreiheit	7	21.12.2005 14:55
Text aus der DB verteilen		PHP Tipps 2007	17	16.11.2005 12:04
[Erledigt] Link		PHP Tipps 2005-2	10	20.07.2005 21:28
[Erledigt] Text auf Bild		PHP Tipps 2005	9	28.04.2005 15:05
[Erledigt] DIV´s wollen nicht wie ich das will :-)		HTML, Usability und Barrierefreiheit	22	28.03.2005 18:36
frames probleme		HTML, Usability und Barrierefreiheit	6	18.01.2005 02:33
Per Button Text formatieren	Igäl	HTML, Usability und Barrierefreiheit	1	11.11.2004 06:25
Javascript: Text einfügen geht nich über "javascript:BL		HTML, Usability und Barrierefreiheit	14	19.10.2004 21:44
Zeilenumbrüche aus einem formatierten Text entfernen	woods	PHP Tipps 2004	9	23.09.2004 12:50
txt-Datei erstellen	d-81	PHP Tipps 2004	12	11.08.2004 20:31

21.02.2005, 20:51
Stümper Erfahrener Benutzer Registriert seit: 30.07.2004 Beiträge: 255	so, ich habe jetzt ein Mass gefunden, das für alle mac fähigen Browser geht (Safari, Firefox für Mac, IE für Mac). Courier, font-variant: small-caps. Sieht cool aus. Auf dem Windows PC leider beschissen. Sind Schriften Platformspezifisch? Dann muss ich mir ja eigentlich nur eine gute PC Schrift suchen und eine Weiche für Mac und PC bauen (PHP). Oder wie würdest du das Problem der verschiedenen Darstellung durch verschiedene Browser angehen? __________________ Zerstört alle Computer!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.02.2005, 21:53
Stümper Erfahrener Benutzer Registriert seit: 30.07.2004 Beiträge: 255	@Werbegeschenk ein Rollbalken sieht einfach beschissen aus, weil ich eine Hintergrundgrafik verwende, die einen Bereich hat, um Text anzuzeigen. Selbstverständlich tritt der Effekt im Browser auf. @CIX88 ich muss wohl einfach ausprobieren. Wenns auf dem Safari toll aussieht, siehts auf dem PC meist nicht so gut aus. Leider. __________________ Zerstört alle Computer!

22.02.2005, 09:12
toscho Erfahrener Benutzer Registriert seit: 26.09.2004 Beiträge: 430	Gib die Breite der Box in der Einheit »em« an, und die Schrift darin als Festbreitenschrift. Geh dabei nicht unter 1em – die Größe, die sich deine Leser als »gut lesbar« eingestellt haben. Ansonsten wird jede Berechnung garantiert schief gehen. Im Ganzen halte ich deinen Versuch für unsinnig. Du kannst keine unbekannte Größe (Schrift) auf eine bekannte (Bild) abbilden. Was, wenn jemand die Seite mit 20px Schriftgröße betrachtet? Zerlege das Bild lieber und bau einen Rahmen daraus um den Text, der sich an den Inhalt anpaßt. Und »Courier« ist auf Windows eine Bitmapschrift, natürlich sieht die in den meisten Fällen schrottig aus. Eine Alternative wäre eventuell »Courier New«, aber auch die ist nicht besonders schön.

22.02.2005, 15:31
Stümper Erfahrener Benutzer Registriert seit: 30.07.2004 Beiträge: 255	@toscho du hast mit deiner Bemerkung eigentlich Recht, nur: ich habe eine Hintergrundgrafik fester Grösse und möchte eine bestimmte Anzahl Zeichen in einen bestimmten Bereich schreiben. Was also bleibt mir anderes übrig, als eine Schrift zu nehmen, die so gut lesbar ist, dass sich weiteres Zoomen erübrigt? Wie meintest Du das mit dem Zerschneiden der Grafik? ist sie dann skalierbar? Sind Hintergrundbilder überhaupt skalierbar? In punkto Webdesign habe ich so gut wie gar keine Erfahrung. Aber eben: aus Fehlern lernt man ... __________________ Zerstört alle Computer!

23.02.2005, 05:26
toscho Erfahrener Benutzer Registriert seit: 26.09.2004 Beiträge: 430	Es geht überhaupt nicht ums Zoomen, sondern darum, daß schon die Ausgangsschriftgröße zu groß sein kann. Praktisch alle Browser bieten eine Möglichkeit an, Mindestgrößen zu setzen oder deine Größenvorschläge komplett zu ignorieren. Dem muß dein Layout standhalten, sonst ist es nicht webtauglich. Ein Ausweg wäre eben das Zerlegen: Du setzt Ecken und Rahmen als einzelne Hintergrundbilder um die Textbox, so das also die Position der linken oberen Ecke unabhängig ist von der der rechten unteren. Dazu brauchst du vermutlich mehr CSS (»float«!) und Markup als jetzt und mußt ein bißchen um diverse Implementationshürden herumbasteln, aber grundsätzlich geht das. Ich habe sowas schon selbst gemacht, bzw. machen müssen, halte es aber eigentlich noch nicht für praxistauglich. Man steckt zuviel Arbeit hinein, bekommt nie ein wirklich perfektes Ergebnis und mutet dem Leser einen Haufen eigentlich unnötiger Requests zu. Dennoch ist es eine schöne Übung, bei der du viel lernen kannst.