nicht angemeldet
Textgröße in %
0 
Matthias Apsel
0 0 0 0 0 0 0 Matthias Apsel
0
0
0 Matthias Apsel
Textgröße in %
Der MartinHallo,
ich möchte ein Bild darstellen und darin Werte eintragen.
Ich möchte dieses in der Größe ändern können. Das Bild und die Position des Textes im Bild reagiert gut. Nur die Textgröße ändert sich nicht mit.
Also schiebe ich das Fenster kleiner ändert sich die Position des Textes wie gewollt. Nur die größe des Textes ändert sich nicht mit.
Hier ein Beispielprogramm:
<html>
<head>
<title>Test</title>
<style type="text/css"><!--
p{ color: #FFFFFF; font-size: 17px;font-weight: normal;}
h2 {color: #000000; font-size: 27px;font-weight: bold;}
--></style>
<script type="text/javascript"><!--
var aktiv = window.setInterval("hol_datum()", 1000);
var i=0;
function hol_datum()
{
i = i +1;
}
--> </script>
</head>
<body>
<div style="position:absolute; left:auto; top:auto; font-size: 32px; font-weight: bold;">
<image src="LayoutFliessbandStation2.jpg" width=100% height=100%>
<div style="position:absolute; left:40%; top:18%; color:black; font-size: 100%;" id="Stopzeit">Text1</div>
<div style="position:absolute; left:35%; top:28%; color:black; font-size: 100%;" id="Taktzeit">Text2</div>
<div style="position:absolute; left:51%; top:28%; color:black; font-size: 100%;" id="Taktsoll">Text3</div>
</div>
</body>
</html>
-
Om nah hoo pez nyeetz, Folli!
http://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften/font-size
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
Verstehe ich nicht!
Einzige Erkenntnis: Alle prozentualen Angaben beziehen sich auf die Schriftgröße des ElternelementsWarum funktioniert die Vererbung nur auf die Position und nicht auf die Schriftgröße? Wo ist meine Unkenntnis?
-
<div style="position:absolute; left:auto; top:auto; font-size: 32px; font-weight: bold;">
Warum funktioniert die Vererbung nur auf die Position und nicht auf die Schriftgröße? Wo ist meine Unkenntnis?32px sind bei jeder Fenstergröße 32px. Wenn sich diese 32px-Angabe ändern würde, würdest du auch sehen, das die Schriftgröße vererbt wird.
MfG
bubble-
Danke für die Antwort, ich habe damit ein bisschen rumgespielt:
Ich kann für 32px auch auto schreiben es ändert sich jedoch am Ergebnis nichts.
MfG Folli<div style="position:absolute; left:auto; top:auto; font-size: 32px; font-weight: bold;">
Warum funktioniert die Vererbung nur auf die Position und nicht auf die Schriftgröße? Wo ist meine Unkenntnis?
32px sind bei jeder Fenstergröße 32px. Wenn sich diese 32px-Angabe ändern würde, würdest du auch sehen, das die Schriftgröße vererbt wird.MfG
bubble-
Danke für die Antwort, ich habe damit ein bisschen rumgespielt:
Ich kann für 32px auch auto schreiben es ändert sich jedoch am Ergebnis nichts.Um die stetige Skalierung zu erzielen, die Matthias Apsel hier angesprochen hat, fällt mir eigentlich nur JavaScript ein, wäre wohl aber eher eine unschöne Lösung.
MfG
bubble-
Ich dachte es ist einfach! Und brauche nur einen Denkanstoß.
Mit Java: woher bekomme ich die Fenstergröße/Bildgröße. (Ich bin noch ein relativer Neuling in Java).
Und wie lässt sich die Schriftgröße stetig Skalieren auch wenn ich den Größenwert ständig ändere?MfG Folli
-
Ich dachte es ist einfach! Und brauche nur einen Denkanstoß.
Mit Java: woher bekomme ich die Fenstergröße/Bildgröße. (Ich bin noch ein relativer Neuling in Java).
Und wie lässt sich die Schriftgröße stetig Skalieren auch wenn ich den Größenwert ständig ändere?Java und JavaSCRIPT(!!) ist ein riesiger Unterschied, bitte nicht verwechseln ;)
Als erstes müsste man halt definieren, ob man nach Höhe oder nach Breite des Browserfensters geht. Ich geh jetzt einfach mal von Breite aus.
var fensterBreite = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || -1;
var fensterlegt eine Variable an, mit = wird ihr der Wert rechts zugewiesen.
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidthsieht komplizierter aus als es eigentlich ist.
Verschiedene Browser lagern die Fensterbreite/-höhe in verschiedenen Objekten aus. Von links nach rechts, wird nun getestet ob die Variable existiert (bzw. nicht undefiniert ist), wenn sie existiert, wird der Wert in fensterBreite gespeichert und der Rest ignoriert, existiert sie nicht/ist undefiniert, geht das gleiche spiel mit der nächsten Variablen los, wenn keine der Variablen existiert/definiert ist, wird der Wert -1 in fensterBreite gespeichert.Um die aktuelle Schriftgröße relativ zur Fensterbreite zu bekommen, muss man nun ein wenig rechnen und ein paar Standardwerte definieren.
Meistens will man ja eine maximale und eine minimale Schriftgröße haben. Also müssen diese auch definiert werden.
var minSchriftgroesse = 4, maxSchriftgroesse = 50;
Um die aktuelle Schriftgröße zu berechnen braucht man dann nur noch eine Schriftgröße zu einer bestimmten Fensterbreite definieren und kann dann ganz simpel via Verhältnisgleichung rechnen.
var festSchriftgroesse = 20, festFensterbreite = 400;
So zur Verhältnisgleichung:
festSchriftgroesse / festFensterbreite = aktuelleSchriftgroesse / aktuelleFensterbreite
das ein wenig umgeformt ergibt dann:
var aktuelleSchriftgroesse = festSchriftgroesse * aktuelleFensterbreite / festFensterbreite;
So nun hat man allerdings noch seine minmale und maximale Schriftgröße, das Math-Objekt hat dafür zwei nützliche Funktionen: Math.min(a,b) und Math.max(a,b)
Math.min gibt den kleineren Wert zurück,
Math.max den größeren.
aktuelleSchriftgroesse = Math.max(Math.min(aktuelleSchriftgroesse,maxSchriftgroesse),minSchriftgroesse);Jetzt fehlt nur noch, wie man denn die neu berechnete Schriftgröße für das Hauptelement setzt.
Um leichter Zugriff auf das Element zu haben, gehe ich davon aus das es die id "main" hat.Als erstes besorgen wir uns das Objekt des Elements und speichern es in die Variable element
var element = document.getElementById("main");
Die Schriftgröße kann man dann wie folgt setzen:
element.style.fontSize = "50px";Nun kann man das alles noch in eine Funktion stopfen:
function setzeSchriftgroesse(){ var minSchriftgroesse = 4, maxSchriftgroesse = 50, festSchriftgroesse = 20, festFensterbreite = 400; var aktuelleFensterbreite = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || -1; if(aktuelleFensterbreite>0){ var aktuelleSchriftgroesse = festSchriftgroesse * aktuelleFensterbreite / festFensterbreite; aktuelleSchriftgroesse = Math.max(Math.min(aktuelleSchriftgroesse,maxSchriftgroesse),minSchriftgroesse); var element = document.getElementById("main"); element.style.fontSize = aktuelleSchriftgroesse+"px"; } }Diese Funktion muss jetzt jedes Mal wenn sich die Fenstergröße ändert aufgerufen werden.
Dafür gibt es das window hat eine Eigenschaft die onresize heißt, weise ihr eine Funktion zu und diese Funktion wird jedes mal beim Vergrößern/Verkleinern des Fensters ausgeführt:
window.onresize = setzeSchriftgroesse;Alles in allem ist es dieser JavaScript-Code:
function setzeSchriftgroesse(){ var minSchriftgroesse = 4, maxSchriftgroesse = 50, festSchriftgroesse = 20, festFensterbreite = 400; var aktuelleFensterbreite = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || -1; if(aktuelleFensterbreite>0){ var aktuelleSchriftgroesse = festSchriftgroesse * aktuelleFensterbreite / festFensterbreite; aktuelleSchriftgroesse = Math.max(Math.min(aktuelleSchriftgroesse,maxSchriftgroesse),minSchriftgroesse); var element = document.getElementById("main"); element.style.fontSize = aktuelleSchriftgroesse+"px"; } } window.onresize = setzeSchriftgroesse;MfG
bubble-
Om nah hoo pez nyeetz, bubble!
Java und JavaSCRIPT(!!) ist ein riesiger Unterschied, bitte nicht verwechseln ;)
Matthias
--
1/z ist kein Blatt Papier.
-
Hi Matthias
Nach ca. 1 Stunde vergeblichen suchens nach dieser Seite, hab ich aufgegeben und einfach hingeschrieben, dass es ein riesiger Unterschied ist :'D
Nebenbei, Ich hätte da zu B noch einen Vorschlag. Weiß allerdings nicht genau wie man es bildlich umsetzen könnte.
Bit und Bitburger wäre das Päärchen :3MfG
bubble-
Hallo,
Nebenbei, Ich hätte da zu B noch einen Vorschlag. Weiß allerdings nicht genau wie man es bildlich umsetzen könnte.
Bit und Bitburger wäre das Päärchen :3schwierig, denn was meinst du mit Bitburger? Das Bier (dann wär's Werbung), oder einen Einwohner der Stadt Bitburg (das wäre tatsächlich schwierig darzustellen)? Und was meinst du mit Bit? Die digitale Informationseinheit, oder die Kurzbezeichnung für das schon erwähnte Bier?
Besser vielleicht Bit und Bitter Lemon?
Ciao,
Martin--
PCMCIA: People Can't Memorize Computer Industry Acronyms
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
[latex]Mae govannen![/latex]
Besser vielleicht Bit und Bitter Lemon?
Oder Gunnar ;)
Stur lächeln und winken, Männer!
Kai--
var jQuery = $(hit);
Wir sind die Schlumpf. Widerschlumpf ist schlumpflos. Wir werden Sie einschlumpfen.
SelfHTML-Forum-Stylesheet
-
schwierig, denn was meinst du mit Bitburger? Das Bier (dann wär's Werbung)
In der Tat über die Werbung in dem Sinne hatte ich nicht nachgedacht.
Und was meinst du mit Bit? Die digitale Informationseinheit
Yep.
MfG
bubble
-
-
-
-
DANKE bubble DANKE
Eingesetzt gestartet läuft. Du hast sogar die Schriftgröße fast passend geschätzt. Mann Du kannst Dir garnicht vorstellen wie ich mich gefreut habe (Wie ein Kind zu Weihnachten, erlich). Dann auch noch mit der Erklärung zu jedem Punkt. Wenn ich bedenke was ich alles probiert habe.
Nochmal besten dank. Wirklich super.-
Eingesetzt gestartet läuft.
Prima, war nämlich ungetestet.
JavaScript sollte nach wie vor nur minimal zum Layouten eingesetzt werden (wenn überhaupt). Man kann schließlich in seinem Browser auch JavaScript deaktivieren, daher solltest du immernoch näherungsweise mit CSS alles Layouten.
MfG
bubble-
Ja, danke.
Ich versuchte es mit CSS umzusetzen. Dachte es wäre der beste Weg. Funktiniert aber nicht.
Da die Seite auch XML Daten anfordert und verarbeitet, muss JavaScript hier aktiv sein. Somit nicht so schlimm.Danke nochmal für Deine Hilfe.
FolliEingesetzt gestartet läuft.
Prima, war nämlich ungetestet.JavaScript sollte nach wie vor nur minimal zum Layouten eingesetzt werden (wenn überhaupt). Man kann schließlich in seinem Browser auch JavaScript deaktivieren, daher solltest du immernoch näherungsweise mit CSS alles Layouten.
MfG
bubble
-
-
-
-
-
-
-
-
-
-
Om nah hoo pez nyeetz, Folli!
Wenn du die Schriftgröße in Prozent angibst, bezieht sich das auf die Textgröße des Elernelements. Es ist mit CSS nicht möglich, die Schriftgröße in Abhängigkeit von den Abmessungen des Elements anzugeben.
Du könntest media-queries verwenden und damit in Abhängigkeit von der Viewportgröße andere Schriftgrößen definieren, wirst dann aber auch keine stetige Skalierung der Schrift erreichen.
Matthias
--
1/z ist kein Blatt Papier.