Skip to content

Instantly share code, notes, and snippets.

@loveencounterflow
Created March 13, 2015 14:15
Show Gist options
  • Save loveencounterflow/d8c20b9021d2ab3f573a to your computer and use it in GitHub Desktop.
Save loveencounterflow/d8c20b9021d2ab3f573a to your computer and use it in GitHub Desktop.
Rendered pixels differ from nominal pixels
( $ 'document' ).ready ->
log = console.log.bind console
nominal_line_height = 25
line_count = 36
panel = $ '.panel'
cork = $ '.cork'
panel_rectangle = panel[ 0 ].getBoundingClientRect()
cork_rectangle = cork[ 0 ].getBoundingClientRect()
real_panel_height = panel_rectangle[ 'height' ]
real_cork_bottom = cork_rectangle[ 'bottom' ]
expected_panel_height = nominal_line_height * line_count
nompx_per_realpx = expected_panel_height / real_panel_height
real_line_height = real_panel_height / line_count
real_line_count = real_cork_bottom / real_line_height
log panel_rectangle
log cork_rectangle
log "expected_panel_height: ", expected_panel_height
log "real_panel_height: ", real_panel_height
log "nompx_per_realpx: ", nompx_per_realpx
log "real_line_height: ", real_line_height
log "real_line_count: ", real_line_count

FirefoxDev (37.0a2 (2015-02-23))

expected_panel_height:     900
real_panel_height:         900
nompx_per_realpx:          1
real_line_height:          25
real_line_count:           36

Google Chrome (41.0.2272.89)

expected_panel_height:      900
real_panel_height:          892.7999877929688
nompx_per_realpx:           1.0080645299120465
real_line_height:           24.799999660915798
real_line_count:            36

<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" src="./jquery-2.1.3.js"></script><script type="text/javascript" src="./outerHTML-2.1.0.js"></script><style>html, body {
margin: 0;
padding: 0;
font-size: 25px;
line-height: 25px;
}
div.panel {
width: 200px;
outline: 1px solid red;
}
span.cork {
display: inline-block;
color: red;
}</style><script type="text/javascript">(function() {
var __slice = [].slice,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
(function () {
return ($('document')).ready(function() {
var cork, cork_rectangle, expected_panel_height, line_count, nominal_line_height, nompx_per_realpx, panel, panel_rectangle, real_cork_bottom, real_line_count, real_line_height, real_panel_height;
log = console.log.bind(console);
nominal_line_height = 25;
line_count = 36;
panel = $('.panel');
cork = $('.cork');
panel_rectangle = panel[0].getBoundingClientRect();
cork_rectangle = cork[0].getBoundingClientRect();
real_panel_height = panel_rectangle['height'];
real_cork_bottom = cork_rectangle['bottom'];
expected_panel_height = nominal_line_height * line_count;
nompx_per_realpx = expected_panel_height / real_panel_height;
real_line_height = real_panel_height / line_count;
real_line_count = real_cork_bottom / real_line_height;
log(panel_rectangle);
log(cork_rectangle);
log("expected_panel_height: ", expected_panel_height);
log("real_panel_height: ", real_panel_height);
log("nompx_per_realpx: ", nompx_per_realpx);
log("real_line_height: ", real_line_height);
return log("real_line_count: ", real_line_count);
});
})();
})();</script></head><body><div class="panel">Just at this moment Alice felt a very curious sensation, which puzzled
her a good deal until she made out what it was: she was beginning to
grow larger again, and she thought at first she would get up and leave
the court; but on second thoughts she decided to remain where she was as
long as there was room for her.
Just at this moment Alice felt a very curious sensation, which puzzled
her a good deal until she made out what it was: she was beginning to
grow larger again, and she thought at first she would get up and leave
the court; but on second thoughts she decided to remain where she was as
long as there was room for her.<span class='cork'>x</span></div></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment