-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (51 loc) · 2.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Responsive text</title>
<meta name="description" content="A responsive 'fittext' script that is calculating the required font size to get the desired width of the element and sets that using the vw unit so that no window resize events is necessary.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="dist/responsive-text.js"></script>
</head>
<body>
<div class="row">
<div class="column">
<span class="responsiveText">Morinehtar</span>
</div>
<div class="column">
<span class="responsiveText">Rómestámo</span>
</div>
</div>
<div class="row">
<div class="column">
<h1 class="responsiveText">... unfolding a history <br/> whose vastness and majesty <br/> had never been equalled ...</h1>
</div>
</div>
<script>
// Select elements to manipulate
var elements = document.querySelectorAll('.responsiveText');
// Create a new instance of responsiveText
// All settings are optional
var responsiveText = new responsiveText(elements, {
unit: 'px',
targetSize: {},
min: 0,
max: 1000000000,
divider: 100000,
length: -6,
comparator: null,
checkHeight: true,
checkWidth: true,
callback: function( element, fontSize ) {}
});
// Initiate responsiveText
responsiveText.init();
// Either use vw as unit to get responsive width
// or can add an event listener to resize
window.addEventListener('resize', function() {
responsiveText.init();
});
</script>
</body>
</html>