Alexander Kiel: Abfrage große/kleine Schriftarten - Lösung gefunden

Hallo Forumsleser,

ich habe mitbekommen, dass nach einer Möglichkeit gesucht wird, herrauszufinden,
ob der Besucher einer Seite kleine oder große Schriften eingestellt hat. Es wurde
diskutiert ob man es über irgendeine Browserschnittstelle abfragen könne und es
sieht so aus als ginge es nicht.

Ich habe mich mal hingesetzt und eine mehr oder weniger unelegante Lösung programiert,
die unter den aufgeführten Testumgebungen funktioniert.

Browser:   IE 4-5 (müsste auch mit Änderungen auch unter Netscape laufen, habe aber
                   keins und habe keine Lust gehabt es dafür zu schreiben, wenn ich
                   es nicht testen kann)

OS:        Win95C, Win98 (habe nicht's anderes mit Browser)

Auflösung: 640x480,800x600,1024x768

getestete Schritarten: groß, klein (125 dpi/96 dpi)

Vorraussetzungen an Browser: Javascript, Frames

Ich habe an meine Lösung die Bedingung gestellt, das das Layout in keinster Weise auch
nur temporär beeinflusst wird und das man durch einen blosen Funktionsaufruf das Ergebniss,
der eingestellten Schriftart herauskommt. Deswegen mag die Lösung etwas umständlich
erscheinen. Aber ich habe ja schon erwähnt, dass sie etwas unelegant ist.

HIER DER QUELLTEXT:

1.html

Name: fontsize.html

Inhalt: <span id="widthtest"></span>

2.html

Name: egal

Inhalt:

<html>
<head>
  <script language="JavaScript">
  <!--
   function gettextWidth(text,fontfamily,fontsize,fontweight)
    {
     with(top.fonttest.document.all.widthtest)
      {
       style.fontFamily=fontfamily;
       style.fontSize=fontsize;
       style.fontWeight=fontweight;
       innerHTML=text;
       while(offsetWidth==0){}
      }
     return top.fonttest.document.all.widthtest.offsetWidth;
    }

function winfontsize()
    {
     var pixelFontheight=0;
     with(top.fonttest.document.all.widthtest)
      {
       style.fontFamily='arial';
       style.fontSize='10pt';
       innerHTML='A';
       while(offsetHeight==0){}
       pixelFontheight=offsetHeight;
      }
     if(pixelFontheight<18)
      {return 'small Fonts';}
     else
      {return 'big Fonts';}
    }
  //-->
  </script>
</head>

<body onLoad="alert(winfontsize());">

<! Seiteninhalt>

<iframe src="fontsize.html" name="fonttest" width=0 height=0 scrolling=no></iframe>
</body>
</html>

ENDE QUELLTEXT

ERKLÄHRUNG (Es geht erst einmal nicht um die Funktion gettextWidth())

Wenn man an der Stelle <! Seiteninhalt> seine HTML-Tag's einfügt, die normalerweise auch
zwischen dem <body>-Tag stehen, hat man seine ganz normale Seite (war Vorraussetztung).

Diese Seite hat also keinen Inhalt.

Wenn man die Funktion winfontsize() aufruft bekommt man entweder 'small Fonts' oder 'big Fonts'
zurückgeliefert (0 und 1 ist hier zweckmäßiger, aber der Anschaulichkeit wegen...). Zur
Demonstration offnet sich nach dem aufbauen der Seite ein alert-Fenster, indem das Ergebniss
enthalten ist.

Zur Funktionsweise:

Ich habe ein <span>, indas ich einen beliebigen Buchstaben ('A') mit innerHTML hinenschreibe und
desweiteren die Schriftart/größe auf irgend einen Wert setze, wobei ich die Größe natürlich in
pt angebe. Wenn alles gesetzt ist, warte ich bis der Browser das 'A' hingemalt hat (nicht lachen
ich hab da so meine Erfahrungen mit langsamen Systemen [anderes Thema]). Wenn dann also eine
offsetHeight da ist, speichere ich sie in einer Variablen (nicht notwendig, aber anschaulicher).
Dann vergleiche ich diesen Wert mit einem experimentell ermittelten Grenzwert, der sich auf den
Testsystemen als ausreichend genau herausgestellt hat. Durch einen if-Vergleich stelle ich dann
fest, ob der Besucher der Seite kleine oder große Schriftarten in seinem System eingestellt hat.

Das <iframe> ist nur dazu da, dass man dieses hingemale des beliebigen Buchstabens nicht sieht.
Man kann dies auch gerne weglassen. Ich arbeite übrigends sehr gerne mit diesen "unsichtbaren Webseiten",
weil man damit z.B. was mittels CGI-Perl printen kann, ohne, das der Surfer sieht (ist fies <g> und anderes
Thema). Und deswegen natürlich auch die zweite HTML.

Zu gettextWidth():

Damit kann man feststellen, ob ein bestimmter Text mit bestimmter Schriftformatierung, in einen
bestimmten Layoutbereich hineinpasst. Geht genauso. (Quelltext lesen) Wenn jemand die benötigte
Höhe braucht - bitte selber proggen. (suchen-ersetzen Width durch Height <g>)

Dann wars das im Grunde schon und ich würde mich freuen, wenn der eine oder andere positive oder
negative Kommentare über meine Lösung ablassen könnte.

Desweteren währe ich an einer Mathematischen Höhen/Breiten - Brechnung eines bestimmten Textes in
einer bestimmten Schriftformatierung interresiert. (mathematisches gettextWidth())

Bis dann man liest sich...

ALEX

P.S. Wer in Bezug auf große/kleine Schriftarten nur Probleme mit Schriftgrößen hat, der kann diese
     auch gern in 'px' angeben.

  1. Hallo Alexander!

    Ich habe deinen Code ausprobiert: und hätte einige Fragen.
    (zu besseren Verständniss meiner Fragen: ich kenne mich mit Javascript nur begrenz aus)

    Wenn man den Wert in deinem Code von 10pt ändert (bei 9pt wird small fonts ausgegeben, ebenso wie bei 14px) hat es keine Relevanz mehr. Wei kann ich den Code also verwerten? (ich habe deinen Code bei 1152x864 + große Schriftarten getestet.)
    Du hast es selbst angesprochen: wie kann man es feststellen ob bei großen Schriftarten ein Text in einem bestimmten Breich passt?

    Das Problem ja bei Verwendung von pt, daß diese unter großen Schriftarten mitscaliert wird. Bei der Verwendung von px ist das nicht der Fall.

    Grüße
    Thomas

    1. Hi Thomas,

      ich habe die Angabe 10pt frei gewählt. Daraus entsteht dann der Grenzwert (17), welcher die Unterscheidung in große oder kleine Schriftarten bringt. Wenn man dort 20pt schreiben würde käme man warscheinlich auf den doppelten Grenzwert.

      Du hast es selbst angesprochen: wie kann man es feststellen ob bei großen Schriftarten ein Text in einem bestimmten Breich passt?

      Nutze die Funktion gettextWidth, welche die Breite des Texttes, bei der angegebenen Schriftformatierung ausgibt. Für die Höhe musst du die Funktion wie erwähnt umschreiben.

      Viel Spass

      ALEX

  2. Es ist wirklich vertane Zeit sowas abfragen zu wollen. Erstens bezieht sich diese grosse und kleine Schriftartenproblem ausschliesslich auf Windows und zweiten, gibt es dort nicht nur die zwei Optionen, sondern man kann ganz individuell die Schriftart einstellen. Also auch irgendwas dazwischen oder viel groesser.

    Irgendwie steht der Aufwand in keinem Verhaeltnis zum Ergebnis.

    Viele Gruesse, Thomas Hieck

    1. Hi Thomas,

      Es ist wirklich vertane Zeit sowas abfragen zu wollen. Erstens bezieht sich diese grosse und kleine Schriftartenproblem ausschliesslich auf Windows und zweiten, gibt es dort nicht nur die zwei Optionen, sondern man kann ganz individuell die Schriftart einstellen. Also auch irgendwas dazwischen oder viel groesser.

      Wenn du die Grenzwertabfrage für 125/96 dpi Schriftarten weglässt, kann man aus dem Wert der Höhe des Zeichens 'A', bei 10pt den dpi-Wert, der eingestellten Schriftart ausrechnen.
      (keine lust das jetzt zu machen)

      Irgendwie steht der Aufwand in keinem Verhaeltnis zum Ergebnis.

      Es ging mir auch nur darum mal eine Lösung vorzustellen, die wie ich öffters angesprochen habe nicht besonders elegent und meinetwegen auch zu aufwendig ist.
      Ich habe es blos so mitbekommen, dass es einige interessiert, ob der Besucher der Seite kleine oder größe Schriftarten eingestellt hat.

      Es wurde auch schon über einen Javaansatz und Lösungen bis zum Gewollten Auslesen der win.ini (geht ja <g>).

      Also dann,

      ALEX

  3. Hallo Alexsander,

    ich habe mitbekommen, dass ...
    ob der Besucher ... kleine oder große Schriften eingestellt hat.

    ich finde es gut, daß Du Dich mit dem Thema beschäftigst.
    Es geistert ja schon seit 'Ewigkeiten' immer wieder hier im Forum herum.
    Ich bin noch nicht dazu gekommen mit Deinem Ansatz herumzuexperimentieren.
    Mag ja sein, daß er 'unelegant' ist, bestechend ist aber, daß er mit JS läuft.
    Ist ja wohl deutlich öfter aktiv als Java.
    Klar beschränkt sich die eigentliche Fragestellung auf Windows, aber Dein Ansatz
    scheint aber offen zu sein für 'Viewport-Probleme/Fragen' aller Plattformen.

    Dann wars das im Grunde schon und ich würde mich freuen, wenn der eine oder
    andere positive oder negative Kommentare über meine Lösung ablassen könnte.

    Wie gesagt, hab' mich noch nicht mit Deinem Ansatz selbst und seinen eventuellen
    Fußangeln beschäftigt, ich finde es aber Toll, wenn Du Dich mit Sachen auseinander-
    setzt die für viele offensichtlich ein Problem darstellen.
    Selbst wenn Dein Lösungsansatz noch nicht ganz rund sein sollte, so hast Du
    zumindest das anscheinend unumstößliche NEIN-GEHT-NICHT infrage gestellt.

    Klaus