Hallo,
ich habe eine Frage zum JS FitText ( http://fittextjs.com/ ).
Bei der Demo habe ich einen Text mit FitText responsive gemacht.
Allerdings verstehe ich das System nicht ganz.
Ich habe einen Div-Container für den Text mit rotem Hintergrund und 50% Breite erstellt.
Darin ist ein span-Element, welcher eine grüne Hintergrundfarbe hat.
Frage 1. Wieso ignoriert jetzt FitText die Breite dex Div-Containers? Eigentlich sollte der Inhalt sich doch an die 50% Breite halten? Wenn man das Browsterfenster kleiner zieht, sieht man, dass FitText diese Breite völlig ignoriert … trotz, dass es ja eigentlich ein Kind-Element davon ist. Das liegt wohl an der Posistionsangabe von FitText.
Wie schaffe ich es aber, einen Responsive-Text auf eine gewünschte Breite zu bringen? Also wenn ich ein Text eben auf 50% Breite eines Divs haben will und dann eben 100% Textbreite in den 50% Div eines Containers.
Frage 2. Wenn man das Fenster ganz groß zieht und dann langsam verkleinert sieht man, dass die Schrift sich erstmal nicht verändert, sondern erst an eine gewissen Punkt anfängt sich zu verkleinern, trotz dass der Container bzw das Fenster kleiner wird und sich auch das Hintergrunbild anpasst.
Wie legt FitText denn den Zeitpunkt fest um sich zu verkleinern bzw. anzupassen? Ich habe gelesen, dass liegt andem Wert nach .fitText( …
$(".fittext-demo1").fitText(2, { minFontSize: '2px', maxFontSize: '62px' });in dem Fall 2. Doch ganz schlau werde ich daraus nicht. Wenn ich es auf 1 stelle, fängt er gaaaanz spät an zu skalieren, bei dem Wert 9 ist direkt von Anfang an alles verkleiner- das ist also klar. Nur …
Gibt es keinen Wert, dass es immer 1:1 anpasst?
Also sobald das Fenster sich verändert, dass auch die Schrift sich anpasst? Mit der Angabe ist es immer so eine grobe Sache ab wann er skalieren soll. Also ich hätte es gerne wie ein Bild, das skaliert ja auch direkt, sobald sich das Fenster verkleinert - ohne differenz. Ich hoffe Ihr versteht was ich meine.
Hier mal der Democode (habe leider kein FitText.js online gefunden zum verlinken, daher 2 Codes:
HTML
[CODE]
.container { max-width: 1500px; margin-left: auto; margin-right: auto; } .demo-container2{ min-height: 300px; background-image: url("http://www.halsburylawchambers.com/wp-content/uploads/2012/10/Beach-background.jpg"); background-size: 100%; background-repeat: no-repeat; width: 100%; } .demo-rot{ top: 6%; width: 50%; background: red; height: 100px; } .demo-rot span{ background: green; padding: 1% 2%; color: #fff; white-space: nowrap; }jquery.fittext.js
[CODE]/*global jQuery /
/!
- FitText.js 1.2
- Copyright 2011, Dave Rupert http://daverupert.com
- Released under the WTFPL license
- http://sam.zoy.org/wtfpl/
- Date: Thu May 05 14:23:00 2011 -0600
*/
(function( $ ){
$.fn.fitText = function( kompressor, options ) {
// Setup options
var compressor = kompressor || 1,
settings = $.extend({
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
}, options);
return this.each(function(){
// Store the object
var $this = $(this);
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).on('resize.fittext orientationchange.fittext', resizer);
});
};
})( jQuery );
[/CODE]
Zusammenfassung:
Wie schaffe ich es, einen Text in einem Div, welcher 50% Breite eines Containers besitzt - einen responsive Text einzubauen. Dieser soll 100% Breite, des 50% breiten Divs ausfüllen. Dazu soll sich der Text, wie ein responsive IMG direkt anpassen, wenn das Fenster sich verändert. Also 1:1.
FitText wirkt für mich (noch) relativ unpräzise um ein auf den px genaues Layout zu erstellen.