SuperSizeMe is a free library under SIL Licence built on the top of Plumin.js and FontFaceObserver that allow to easily stretch font to the size of its container.
##Online use example Christmas Card from Sweden | 2016-12-16
#How to use
##Installation Just import the 3 libraries in your HTML page.
<script src="js/fontfaceobserver.js"></script>
<script src="js/plumin.js"></script>
<script src="js/supersizeme.js"></script>To use it, you only need to apply a class [.rt] to the blocks of texts you want to fit.
##Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="js/fontfaceobserver.js"></script>
<script src="js/plumin.js"></script>
<script src="js/supersizeme.js"></script>
<script type="text/javascript">
ssm.fontBook = { wdth :
['font/0.otf',
'font/1.otf',
'font/2.otf']
};
</script>
</head>
<body>
<div class="rt" style="width:50%">Here a fitted text</div>
</body>
</html>##Configuration
Run a fonction before SuperSizeMe has loaded.
ssm.beforeLoad={
myFunction();
};--
Run a fonction when all the fonts are ready to be displayed:
ssm.afterFontReady={
myFunction();
};--
To get the loading informations
ssm.loading = [Array];--
To define a pre-rendered specific subset:
ssm.subset = [String];Default: Null
--
To change the opacity of the fitting preview:
ssm.opacityPreview = [Number];Default: 0.5
--
Enable or disable the fitting preview:
ssm.preview = [Boolean];Default: true
--
Enable or disable the text to fit to its container:
ssm.fit = [Boolean];Default: true
--
Change the number of insterpolated fonts:
ssm.generatedFontNbr = [Number];Default: 100
--
Add fitting elements without a 'rt' class:
ssm.elementsToFit = "#myId .myClass";Default: Null
--
Refresh the text or input a new one :
var newTxt = [String];
myHTMLelement.updateText(newTxt);##Functions
Change size:
var width = [Number];
var height = [Number];
myHTMLelement.updateSize(width, height);--
Apply the specific fitted font:
myHTMLelement.updateInterpolation();--
Fit the font with css transformation (preview):
myHTMLelement.updatePreview();--
Create a specific interpolated font:
myHTMLelement.interpolate();--
Create the full spectrum of font intances:
ssm.interpolate( object, subset );
var object = { master: masterValue, factor: factorValue, name: nameValue };
**var _masterValue_: [Number];** //between _0_ and _ssm.fontBook.wdth.length_
**var _factorValue_: [Number];** //between _0_ and _1_)
**var _nameValue_: [String];--
Update the text and the state of the font:
myHTMLelement.updateAll();--
Add a new element to the SSM object:
var myElement = document.getElementById('#id, #class');
ssm.build(myElement);