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