Schriftgröße in Tabellenzelle automatisch anpassen
0 
Felix Riesterer
1
Schriftgröße in Tabellenzelle automatisch anpassen
Ich habe eine Tabelle in html, deren Spaltengröße ich nicht verändern kann/sollte. Gibt es eine Möglichkeit, dass sich die Schriftgröße innerhalb einer Zelle automatisch verkleinert/vergrößert, damit sie immer den ihr zur Verfügung stehenden Platz einnimmt?
Ähnlich funktioniert das z.B. in PowerPoint, wenn eine Aufzählung in einem Textfeld zu groß wird --> die Schrift wird kleiner, damit alles in das Textfeld passt...
Ich hoffe, man versteht einigermaßen, was ich möchte. Als Hilfsmittel würde mir noch JavaScript zur Verfügung stehen (auf das ich aber - wenn möglich - verzichten möchte).
Vielen Dank,
Wolfgang
-
Lieber Wolfgang,
wenn Du schon das Wort Powerpoint bemühst, dann vermute ich, dass S5: A Simple Standards-Based Slide Show System das passende Werkzeug für Dich ist.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
vielen Dank für deine schnelle Antwort.
Leider wird es sich bei dem ganzen nicht um eine Präsentation handeln (um genau zu sein, soll es ein Widget für mein Handy werden).
Mir ging es nur um die Funktion, wie die Schriftgröße verändert wird, wenn sich der Platz dazu ändert.
Dies würde ich gerne in HTML/CSS/JavaScript in der Tabellenzelle realisieren...Liebe Grüße,
Wolfgang
-
-
Hallo Wolfgang!
Ich habe eine Tabelle in html, deren Spaltengröße ich nicht verändern kann/sollte. Gibt es eine Möglichkeit, dass sich die Schriftgröße innerhalb einer Zelle automatisch verkleinert/vergrößert, damit sie immer den ihr zur Verfügung stehenden Platz einnimmt?
Kurze Antwort: Nein (zumindest meines Wissens nach nicht)
Ich hoffe, man versteht einigermaßen, was ich möchte.
Ja, dein Wunsch ist verständlich.
Als Hilfsmittel würde mir noch JavaScript zur Verfügung stehen (auf das ich aber - wenn möglich - verzichten möchte).
Rein mit HTML als reiner Textauszeichnungssprache ist das generell nicht möglich. Aber auch unter Verwendung von CSS (welches du ja bestimmt für die Formatierung verwendest) lässt sich das so nicht realisieren.
Du hast uns zwar einige Informationen vorenthalten, u.a. ob die Größe der Tabellenzelle eine feste oder relative Größe ist und ob du für die Schriftart eine True Type oder Monospace Schriftart verwendest, aber das spielt letztlich für das Vorhaben keine entscheidende Rolle.
Grundsätzlich hast du es mit folgenden Problematiken zu tun:
Selbst wenn du per CSS eine Schriftart vorgibst, kannst du nie sicher sein, dass auf dem jeweiligen Clientrechner diese Schriftart auch vorhanden ist. Ist das nicht der Fall, "sucht" der Browser sich die "nächst passende" Schriftart für die Anzeige. Dieses Problem könnte man noch durch die Verwendung von Webfonts umgehen.
Das nächste Problem entsteht aber, wenn es sich bei der verwendeten Schriftart um eine True Type Schriftart handelt. Dann ist nämlich die Textbreite abhängig von den vorkommenden Buchstaben (ein 'i' ist bspw. viel schmaler als ein 'm') und nicht mehr nur von der Anzahl der Buchstaben, sonstigen Ziffern und Zeichen (inkl. Leerzeichen) wie bei einer Monospace Schriftart.
Hinzukommt, dass der User durch entsprechende Einstellungen in seinem Browser das "letzte Wort" zum Thema Schriftart und Schriftgröße hat (was auch gut + richtig ist). Und deiner Frage entnehme ich, dass der Text innerhalb der Tabellenzelle variabel ist.
Du müsstest also auf dem Clientrechner ermitteln (lassen), wie groß der Text ist (unter Berücksichtigung der tatsächlich verwendeten Schriftart und Schriftgröße), bzw. das Element, welches den Text umschließt. Dies könntest du per Javascript erledigen. Nun müsstest du quasi per "Trial and Error" die Schriftgröße für das Element schrittweise verkleinern (und immer wieder die Größe ermitteln), bis die Elementgröße <= dem zur Verfügung stehenden Platz innerhalb der Tabellenzelle ist.Dabei gibt es aber diverse Problematiken:
- Die resultierende Schriftgröße könnte so klein ausfallen, dass der Text für den User unlesbar wird.
- Bei Festlegung einer Mindestgröße könnte der Text immer noch zu groß für die Tabellenzelle sein.
- Auf dem Clientrechner steht gar kein Javascript zur Verfügung, bzw. ist deaktiviert.
- Der User hätte gerne eine größere Schriftgröße
Also sicherlich_kann_man so etwas per Javascript machen. Die Frage ist nur, ob man das auch machen sollte. IMHO sollte man es nicht tun. Denn wie oben bereits erwähnt, gibt es keine (mir bekannte) 100% zuverlässige Methode. Man würde also relativ viel Aufwand für gar keinen, oder einen zumindest fragwürdigen Nutzen betreiben.
Wenn du die Größe der Tabellenzelle wirklich nicht auch nur in eine Richtung verändern kannst/ willst, würde sich ggf. noch die Verwendung eines scrollbaren Elements innerhalb der Tabellenzelle anbieten.
Allerdings "vergibst" du durch das "Festzurren" der Tabellenzellengröße einen der wesentlichen Vorteile von Tabellen, nämlich den, dass sie sich automatisch in ihrer Größe dem jeweiligen Inhalt anpassen - ganz ohne irgendwelchen sonstigen Aufwand.Gruß Gunther
-
Hallo Wolfgang!
Hallo Gunther,
Ich habe eine Tabelle in html, deren Spaltengröße ich nicht verändern kann/sollte. Gibt es eine Möglichkeit, dass sich die Schriftgröße innerhalb einer Zelle automatisch verkleinert/vergrößert, damit sie immer den ihr zur Verfügung stehenden Platz einnimmt?
Kurze Antwort: Nein (zumindest meines Wissens nach nicht)
...
Du müsstest also auf dem Clientrechner ermitteln (lassen), wie groß der Text ist (unter Berücksichtigung der tatsächlich verwendeten Schriftart und Schriftgröße), bzw. das Element, welches den Text umschließt. Dies könntest du per Javascript erledigen. Nun müsstest du quasi per "Trial and Error" die Schriftgröße für das Element schrittweise verkleinern (und immer wieder die Größe ermitteln), bis die Elementgröße <= dem zur Verfügung stehenden Platz innerhalb der Tabellenzelle ist.
Diese Methode hatte ich schon fast befürchtet... Und obwohl ich relativ genau sagen kann, welche Schriftart mit welchen Größen verwendet werden (soll, wie gesagt eine Anwendung für ein Handy werden), wird es mir den Aufwand vermutlich nicht wert sein.
Dennoch vielen Dank für deine schnelle und ausführliche Antwort!
Liebe Grüße,
Wolfgang
-
Hallo Wolfgang!
(soll, wie gesagt eine Anwendung für ein Handy werden)
Ah, das ändert ggf. die Situation. Und du erstellst die Anwendung nur mittels HTML, CSS und Javascript?
Darf ich fragen für welches Handy (Betriebssystem)?
Und die Anwendung soll später nur lokal auf deinem Handy laufen oder als App für jedermann verfügbar sein?
Und wie sieht es eigentlich mit dem möglichen Text aus? Wie variabel kann der sein (bezogen auf die Wortanzahl/ Wortlängen)?Gruß Gunther
-
Hallo Wolfgang!
Hallo Gunther,
(soll, wie gesagt eine Anwendung für ein Handy werden)
Ah, das ändert ggf. die Situation. Und du erstellst die Anwendung nur mittels HTML, CSS und Javascript?
Darf ich fragen für welches Handy (Betriebssystem)?Bei der Anwendung handelt es sich um ein Stundenplan-Widget, dass unter bada laufen soll (Samsung). Diese Widgets bestehen hauptsächlich aus HTML, CSS und Javascript (Es ist zwar noch eine Library speziell für das Handy dabei, aber das dürfte keine Rolle spielen).
Und die Anwendung soll später nur lokal auf deinem Handy laufen oder als App für jedermann verfügbar sein?
Ganz genau.
Und wie sieht es eigentlich mit dem möglichen Text aus? Wie variabel kann der sein (bezogen auf die Wortanzahl/ Wortlängen)?
Das ganze wird relativ ähnlich zu diesem Programm aussehen:
http://www.samsungapps.com/topApps/topAppsDetail.as?productId=G00000562894In dieser wurde das Problem so gelöst, dass die Fachbezeichnung nach 3 Buchstaben abschneidet, was eben einer der Punkte ist, die ich anders haben möchte. Momentan hab ich die Zeilenhöhe der Tabelle noch variabel gelassen, d.h. das Wort "Gemeinschaftskunde" wird komplett ausgeschrieben.
Dass ich letztendlich die Wortlänge begrenzen muss, da sonst die Schriftgröße zu klein würde, ist mir klar.Ich vermute nun, dass ich den eingegebenen String "analysieren" muss, d.h. mir jeden Buchstaben anschauen und dessen Breite aufsummieren muss...
-
Hallo Wolfgang!
Und wie sieht es eigentlich mit dem möglichen Text aus? Wie variabel kann der sein (bezogen auf die Wortanzahl/ Wortlängen)?
In dieser wurde das Problem so gelöst, dass die Fachbezeichnung nach 3 Buchstaben abschneidet, was eben einer der Punkte ist, die ich anders haben möchte. Momentan hab ich die Zeilenhöhe der Tabelle noch variabel gelassen, d.h. das Wort "Gemeinschaftskunde" wird komplett ausgeschrieben.
Dass ich letztendlich die Wortlänge begrenzen muss, da sonst die Schriftgröße zu klein würde, ist mir klar.Ich vermute nun, dass ich den eingegebenen String "analysieren" muss, d.h. mir jeden Buchstaben anschauen und dessen Breite aufsummieren muss...
Also so mein erster Gedanke ist der folgende ...
Es entfällt das Problem, dass du nicht sicher weisst, welche Schriftart verwendet wird. Und auch die Größe der Tabellenzelle (ich gehe mal nur vom Landscape Modus aus) ist dir bekannt.
Der größte Vorteil besteht aber imho darin, dass der mögliche Text eben nicht beliebig sein kann, sondern vielmehr aus einer recht überschaubaren Menge an möglichen Worten besteht.Das ermöglicht evt. den Ansatz im Vorfeld "auszuprobieren", welche Schriftgröße für welche Unterrichtsfächer erforderlich ist.
Angenommen du findest so heraus, dass du bspw. 3 verschiedene Schriftgrößen (12px, 14px, 16px) brauchst, damit jedes Fach ausgeschrieben in die Tabellenzelle passt. Dann könntest du die Begriffe, die jeweils die gleiche Schriftgröße haben, in ein Array packen.
Beim Aufruf deiner App lässt du per Javascript den Inhalt jeder Tabellenzelle "scannen" und mit deinen Arrays "abgleichen". Bei einer Übereinstimmung weist du ebenfalls per Javascript der entsprechenden Tabellenzelle eine CSS-Klasse zu, die für die jeweilige Schriftgröße verantwortlich ist.Ich bin absolut kein Javascript-Profi. Es mag also durchaus bessere Ansätze geben.
Jenachdem wieviele unterschiedliche Schriftgrößen du hinterher hast (haben willst) kannst du auch die, die aller Wahrscheinlichkeit nach am häufigsten vorkommt als Standard setzen und musst dann nur nach Zellen mit Inhalten suchen, die eine andere Schriftgröße erfordern.Wenn deine Anwendung auch im Portrait Modus laufen soll, könntest du auch neben der Langform der jeweiligen Fächer eine abgekürzte Form davon speichern und die Inhalte beim Drehen des Handys entsprechend austauschen.
Alle möglichen Fächer(namen) im Vorfeld zu speichern um diese für den Eintrag im Stundenplan in einer Auswahlliste anzuzeigen wäre ja auch nicht verkehrt. Beim Hinzufügen eines neuen Wortes/ Fachs müsstest du halt auch noch den Wert für die zu verwendende Schriftgröße mit angeben (können).
Auf jeden Fall könnte ich mir vorstellen, dass es so oder so ähnlich "ordentlich" funktionieren könnte. Aber evt. hat hier auch noch jemand eine bessere Idee - also ruhig noch abwarten. ;-)
Gruß Gunther
-
Hallo,
Ich vermute nun, dass ich den eingegebenen String "analysieren" muss, d.h. mir jeden Buchstaben anschauen und dessen Breite aufsummieren muss...
Das nicht grerade. Du kannst zunächst den Zeilenumbruch verhindern (mit CSS whiteSpace="nowrap";) und z.B. am Textende jeweils ein Element (img oder so) stehen haben, dessen horizontale Position relativ zum Elternelement dann die Textlänge angibt.
Oder du wählst ein Container-Element für den Text, das seine Breite automatisch dem Inhalt anpasst (evtl. fieldset, bin aber nicht ganz sicher) und liest einfach seine offsetWitdth aus.
In einem Javascript kann man aber nicht einfach so die Schriftgröße kontinuirelich ändern und jeweils die Breite neu messen, denn so eine Style-Änderung wirkt erst, nachdem das Script beendet und das Dokument neu gerendert ist. Daher müsste man sowas mit einem setInerval lösen.
Gruß, Don P
-
-
-