diff --git a/text.html b/text.html
index a7b0931..fc3cbfb 100644
--- a/text.html
+++ b/text.html
@@ -9,15 +9,21 @@ html, body {
body {
display: -webkit-box;
-webkit-box-orient: vertical;
+ overflow: hidden;
}
#top {
-webkit-box-flex: 1;
}
-@font-face {
- font-family: 'Roboto Medium';
- src: url(../../ttf/Roboto-Medium.ttf);
-}
#text {
+ color: #fff;
+ text-align: center;
+ font-family: 'Menlow Regular';
+ font-variant: small-caps;
+ //text-transform: uppercase;
+ font-weight: bold;
+ text-shadow: 2px 4px 3px black;
+}
+#text2 {
color: #fff;
text-align: center;
font-family: 'Roboto Medium';
@@ -42,16 +48,28 @@ Producer.prototype.render = function(time) {
//text.innerText = time;
}
function onLoad() {
- handleFontSize();
var text = document.getElementById("text");
text.innerText = webvfx.getStringParameter("title");
+ handleFontSize();
var producer = new Producer(text.style);
webvfx.renderRequested.connect(producer, Producer.prototype.render);
webvfx.readyRender(true);
}
function handleFontSize() {
// Set base font-size to 10% of window height
- document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
+ //document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
+
+ var fontSize = window.innerHeight * 0.1;
+ text.style.position = 'absolute';
+ var padding = 48;
+ text.style.paddingLeft = padding + 'px';
+ do {
+ console.log(text.getBoundingClientRect().width, window.innerWidth);
+ document.body.style.fontSize = fontSize + 'px';
+ fontSize += 4;
+ } while (text.getBoundingClientRect().width < (window.innerWidth - padding));
+ text.style.position = '';
+ text.style.paddingLeft = '0';
}
window.addEventListener("load", onLoad, false);
window.addEventListener("resize", handleFontSize, false);
diff --git a/ttf/Menlo-Regular.ttf b/ttf/Menlo-Regular.ttf
new file mode 100644
index 0000000..033dc6d
Binary files /dev/null and b/ttf/Menlo-Regular.ttf differ