Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Last active February 19, 2016 22:35
Show Gist options
  • Save kizu/6336129 to your computer and use it in GitHub Desktop.
Save kizu/6336129 to your computer and use it in GitHub Desktop.
Download ZIP
Font resize concept
Raw
dabblet.css
/* Font resize concept */
/* Made after seeing a tweet about Bit Text,
without looking how it was made.
Treat this as a prototype, the code could be enhanced of course.
*/
body {
font-family: Helvetica;
/* Need it there, 'cause could be bugs on toggling */
overflow-y: scroll;
}
.test {
/* If left/right, change transform-origin on .inner */
text-align: center;
}
.inner {
display: inline-block;
white-space: nowrap;
transform-origin: 50% 50%;
}
Raw
dabblet.html
<div class="test">
<span class="inner" contenteditable="true">Something nice</span>
</div>
<div class="test">
<strong class="inner" contenteditable="true">Whatever</strong>
</div>
<div class="test">
<span class="inner" contenteditable="true">Some long words here, hello!</span>
</div>
<hr/>
<!-- We should get a possibility to use multiple inners in one test -->
<div class="test" style="width:50%;">
<span class="inner" contenteditable="true">Something nice at 50%</span>
</div>
<div class="test" style="width:50%;">
<strong class="inner" contenteditable="true">Whatever</strong>
</div>
<div class="test" style="width:50%;">
<span class="inner" contenteditable="true">Some long words here, hello!</span>
</div>
Raw
dabblet.js
function get_fs(el) {
return parseFloat(document.defaultView.getComputedStyle(el,null)
.getPropertyValue('font-size'));
}
function fix_contents(el) {
var inner = el.getElementsByClassName('inner')[0];
// Reset the styles
inner.style.fontSize = "1em";
inner.style.webkitTransform = 'scale(1)';
var initial_fs = get_fs(el);
var modifier = el.offsetWidth / inner.offsetWidth;
var new_fs = initial_fs * modifier;
inner.style.fontSize = new_fs + "px";
// If browser don't support fractional font-size,
// then round the font-size down and resize
// using transform, if possible
if (get_fs(inner) % 1 === 0 ) {
inner.style.fontSize = Math.floor(new_fs) + "px";
modifier = el.offsetWidth / inner.offsetWidth;
inner.style.webkitTransform = 'scale(' + modifier + ')';
}
}
var els = document.getElementsByClassName('test');
function check_size() {
console.log(arguments);
Array.prototype.forEach.call(els, fix_contents);
}
check_size();
window.onresize = function(event) {
check_size();
}
// Events for contenteditable, not that needed anyway
Array.prototype.forEach.call(els, add_edit_listener);
function add_edit_listener(el) {
// Should fix it to use the function that would check
// only the changed element, not all of them.
if (el.addEventListener) {
el.addEventListener("input", check_size, false);
el.addEventListener("DOMNodeInserted", check_size, false);
el.addEventListener("DOMNodeRemoved", check_size, false);
el.addEventListener("DOMCharacterDataModified", check_size, false);
}
}
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment