├── .gitignore ├── README.md ├── index.html ├── jquery.px.js └── unittest ├── index.html └── tests.js /.gitignore: -------------------------------------------------------------------------------- 1 | /nbproject/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery.px 2 | ========= 3 | Version 1.2 4 | 5 | Copyright (c) 2011-2015 Martijn W. van der Lee 6 | Licensed under the MIT. 7 | 8 | Measure an amount of CSS3 units in pixels, relative to a specified context if available. 9 | Based on http://www.filamentgroup.com/lab/update_jquery_plugin_for_retaining_scalable_interfaces_with_pixel_to_em_con/ 10 | 11 | Syntax 12 | ------ 13 | * `$().px();` 14 | * `$.px();` 15 | 16 | Arguments 17 | --------- 18 | ### context (optional) 19 | The DOM tree node in which to measure. Some units like 'em' and '%' are relative to the current font size. 20 | If not specified, 'body' will be used for units that require a context. 21 | 22 | ### size (optional) 23 | A number and CSS3 unit or constant that should be measured. 24 | The number can be integer or floating point and may be preceded by a sign (-/+). 25 | The unit can be any of the following: 26 | 27 | * px, in, cm, mm, pt, pc (no context) 28 | * em, ex, rem, ch (uses context) 29 | * vw, vh, vm, vmin, vmax (no context) 30 | * vd (no context, not a CSS3 unit; hypothenuse of vw and vh) 31 | * thin, thick (border widths) 32 | * border-thin, border-medium, border-thick (alternative names for border widths) 33 | * % (relative to current font-size, uses context) 34 | * xx-small, x-small, small, medium, 35 | * large, x-large, xx-large (font-size names, no context) 36 | * initial (initial font-size) 37 | * smaller, larger (relative font-size names, uses context) 38 | 39 | Both the number and unit/constant are optional; number will default to '1', unit will default to 'em'. 40 | 41 | Return 42 | ------ 43 | The measured size in pixel units. 44 | If the unit is specified but not recognized, an error will be thrown. 45 | 46 | Examples 47 | -------- 48 | * Current font-size (1em) set in , measured in pixels: `$.px();` 49 | * "thin" border-width, measured in pixels: `$.px('thin');` 50 | * "small" font-size, measured in pixels: `$.px('small');` 51 | * Pixels in 2 inches: `$.px('2in');` 52 | * Pixels in a font-size 200%: `$.px('200%');` 53 | * Font-size 200%, within context of the element with id "here": `$('#here').px('200%');` 54 | * Pixels in an inch. Within a context, but context has no influence: `$('#here').px('in'); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery.px 5 | 6 | 7 | 29 | 43 | 44 | 45 | 46 |

jQuery.px

47 | Measure CSS units in pixels. 48 |

Reference: 1em within different contexts of font-size…

49 |
50 |
Default
51 |
x-small
52 |
20px
53 |
1in
54 |
larger
55 |
1cm
56 |
1mm
57 |
100%
58 |
2.54cm
59 |
60 |

Different unit sizes, within context of font-size: 10px

61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |

Different unit sizes, within context of font-size: 20px

88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |

Different unit sizes, without context (<body> has font-size: 14px)

115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |

Different quantities

142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 | 159 | -------------------------------------------------------------------------------- /jquery.px.js: -------------------------------------------------------------------------------- 1 | /*jslint devel: true, bitwise: true, regexp: true, browser: true, confusion: true, unparam: true, eqeq: true, white: true, nomen: true, plusplus: true, maxerr: 50, indent: 4 */ 2 | /*globals jQuery */ 3 | 4 | /*! px 5 | * Copyright (c) 2011-215 Martijn W. van der Lee 6 | * Licensed under the MIT. 7 | */ 8 | /* Measure an amount of CSS3 units in pixels, relative to a specified context if available. 9 | * Based on http://www.filamentgroup.com/lab/update_jquery_plugin_for_retaining_scalable_interfaces_with_pixel_to_em_con/ 10 | */ 11 | 12 | (function($, undefined){ 13 | $.fn.px = function(size) { 14 | var element = $('
').appendTo('body'), 15 | inch = element.height() / 100.; 16 | element.remove(); 17 | 18 | var win = $(window); 19 | 20 | function _measureFontSize(name, context) { 21 | var element = $('
').appendTo(context), 22 | width = $('div', element).height(); 23 | element.remove(); 24 | return width; 25 | } 26 | 27 | function _measureRelativeUnit(unit, context) { 28 | var element = $('
').appendTo(context), 29 | px = element.height() / 100.; 30 | element.remove(); 31 | return px; 32 | } 33 | 34 | function _measureBorderWidth(width) { 35 | var element = $('
').appendTo('body'), 36 | width = element.outerHeight() / 2.; 37 | element.remove(); 38 | return width; 39 | } 40 | 41 | var m = /^([-+]?\d*\.?\d*)(\D*)$/i.exec(size), 42 | length = (size && m != null && m[1])? m[1] : 1, 43 | unit = (size && m != null && m[2])? m[2] : 'em', 44 | px = 0; 45 | 46 | switch (unit) { 47 | // absolute units 48 | case 'px': px = 1; break; 49 | case 'in': px = inch; break; 50 | case 'cm': px = inch / 2.54; break; 51 | case 'mm': px = inch / 25.4; break; 52 | case 'pt': px = inch / 72; break; 53 | case 'pc': px = inch / 6; break; 54 | 55 | // relative units 56 | case 'em': 57 | case 'ex': 58 | case 'rem': 59 | case 'ch': 60 | px = _measureRelativeUnit(unit, this.first()); 61 | break; 62 | 63 | // viewport dimensions 64 | case 'vw': 65 | px = win.width() / 100.; 66 | break; 67 | case 'vh': 68 | px = win.height() / 100.; 69 | break; 70 | case 'vm': 71 | case 'vmin': 72 | px = Math.min(win.width(), win.height()) / 100.; 73 | break; 74 | case 'vd': // non-CSS3! 75 | var w = win.width(); 76 | var h = win.height(); 77 | px = Math.sqrt((w * w) + (h * h)) / 100.; 78 | break; 79 | case 'vmax': // Not supported on IE 80 | px = Math.max(win.width(), win.height()) / 100.; 81 | break; 82 | 83 | // border - plain name 84 | case 'thin': 85 | case 'thick': 86 | px = _measureBorderWidth(unit); 87 | break; 88 | 89 | // border - "border-" prefix 90 | case 'border-thin': 91 | case 'border-medium': 92 | case 'border-thick': 93 | px = _measureBorderWidth(unit.substr(7)); 94 | break; 95 | 96 | // font-size - percentage 97 | case '%': 98 | px = _measureRelativeUnit('em', this.first()) / 100.; // 1/100th of 1em 99 | break; 100 | 101 | // font-size - plain names (no context) 102 | case 'xx-small': 103 | case 'x-small': 104 | case 'small': 105 | case 'medium': 106 | case 'large': 107 | case 'x-large': 108 | case 'xx-large': 109 | // font-size - plain names (uses context) 110 | case 'smaller': 111 | case 'larger': 112 | case 'initial': 113 | px = _measureFontSize(unit, this.first()); 114 | break; 115 | 116 | // unknown unit 117 | default: 118 | throw 'Unknown unit "'+unit+'"'; 119 | break; 120 | } 121 | 122 | return length * px; 123 | }; 124 | 125 | $.px = function(size) { 126 | return $('body').px(size); 127 | }; 128 | })(jQuery); -------------------------------------------------------------------------------- /unittest/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery.px QUnit 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /unittest/tests.js: -------------------------------------------------------------------------------- 1 | /*jslint devel: true, bitwise: true, regexp: true, browser: true, confusion: true, unparam: true, eqeq: true, white: true, nomen: true, plusplus: true, maxerr: 50, indent: 4 */ 2 | /*globals $, QUnit */ 3 | 4 | /* 5 | * Note that results depend on browser default stylesheet. 6 | * Tests developed on Google Chrome 43.0.2357.124 m 7 | */ 8 | 9 | QUnit.module("px"); 10 | 11 | QUnit.test("no context", function(assert) { 12 | var width = $(window).width(), 13 | height = $(window).height(); 14 | 15 | assert.equal($.px("px"), 1, 'px'); 16 | assert.equal($.px("%"), 0.16, '%'); 17 | assert.equal($.px("em"), 16, 'em'); 18 | //assert.equal($.px("ex"), 7.16, 'ex'); depends on previous test 19 | assert.equal($.px("rem"), 16, 'rem'); 20 | assert.equal($.px("ch"), 8, 'ch'); 21 | assert.equal($.px("mm"), 3.7795275590551185, 'mm'); 22 | assert.equal($.px("cm"), 37.79527559055118, 'cm'); 23 | assert.equal($.px("in"), 96, 'in'); 24 | assert.equal($.px("pt"), 1.3333333333333333, 'pt'); 25 | assert.equal($.px("pc"), 16, 'pc'); 26 | assert.equal($.px("vw"), width / 100, 'vw'); 27 | assert.equal($.px("vh"), height / 100, 'vh'); 28 | assert.equal($.px("vm"), Math.min(width, height) / 100, 'vm'); 29 | assert.equal($.px("vd"), Math.sqrt((width * width) + (height * height)) / 100., 'vd'); 30 | assert.equal($.px("vmin"), Math.min(width, height) / 100, 'vmin'); 31 | assert.equal($.px("vmax"), Math.max(width, height) / 100, 'vmax'); 32 | assert.equal($.px("thin"), 1, 'thin'); 33 | assert.equal($.px("thick"), 5, 'thick'); 34 | assert.equal($.px("border-thick"), 5, 'border-thick'); 35 | assert.equal($.px("border-medium"), 3, 'border-medium'); 36 | assert.equal($.px("larger"), 19.2000007629395, 'larger'); 37 | assert.equal($.px("medium"), 16, 'medium'); 38 | assert.equal($.px("initial"), 16, 'initial'); 39 | }); 40 | 41 | QUnit.test("10px context", function(assert) { 42 | var context = $('').appendTo('#qunit-fixture'), 43 | width = $(window).width(), 44 | height = $(window).height(); 45 | 46 | assert.equal(context.px("px"), 1, 'px'); 47 | assert.equal(context.px("%"), 0.1, '%'); 48 | assert.equal(context.px("em"), 10, 'em'); 49 | assert.equal(context.px("ex"), 4.47, 'ex'); 50 | assert.equal(context.px("rem"), 16, 'rem'); 51 | assert.equal(context.px("ch"), 5, 'ch'); 52 | assert.equal(context.px("mm"), 3.7795275590551185, 'mm'); 53 | assert.equal(context.px("cm"), 37.79527559055118, 'cm'); 54 | assert.equal(context.px("in"), 96, 'in'); 55 | assert.equal(context.px("pt"), 1.3333333333333333, 'pt'); 56 | assert.equal(context.px("pc"), 16, 'pc'); 57 | assert.equal(context.px("vw"), width / 100, 'vw'); 58 | assert.equal(context.px("vh"), height / 100, 'vh'); 59 | assert.equal(context.px("vm"), Math.min(width, height) / 100, 'vm'); 60 | assert.equal(context.px("vd"), Math.sqrt((width * width) + (height * height)) / 100., 'vd'); 61 | assert.equal(context.px("vmin"), Math.min(width, height) / 100, 'vmin'); 62 | assert.equal(context.px("vmax"), Math.max(width, height) / 100, 'vmax'); 63 | assert.equal(context.px("thin"), 1, 'thin'); 64 | assert.equal(context.px("thick"), 5, 'thick'); 65 | assert.equal(context.px("border-thick"), 5, 'border-thick'); 66 | assert.equal(context.px("border-medium"), 3, 'border-medium'); 67 | assert.equal(context.px("larger"), 12, 'larger'); 68 | assert.equal(context.px("medium"), 16, 'medium'); 69 | assert.equal(context.px("initial"), 16, 'initial'); 70 | }); 71 | 72 | QUnit.test("100px context", function(assert) { 73 | var context = $('').appendTo('#qunit-fixture'), 74 | width = $(window).width(), 75 | height = $(window).height(); 76 | 77 | assert.equal(context.px("px"), 1, 'px'); 78 | assert.equal(context.px("%"), 1, '%'); 79 | assert.equal(context.px("em"), 100, 'em'); 80 | assert.equal(context.px("ex"), 44.73, 'ex'); 81 | assert.equal(context.px("rem"), 16, 'rem'); 82 | assert.equal(context.px("ch"), 50, 'ch'); 83 | assert.equal(context.px("mm"), 3.7795275590551185, 'mm'); 84 | assert.equal(context.px("cm"), 37.79527559055118, 'cm'); 85 | assert.equal(context.px("in"), 96, 'in'); 86 | assert.equal(context.px("pt"), 1.3333333333333333, 'pt'); 87 | assert.equal(context.px("pc"), 16, 'pc'); 88 | assert.equal(context.px("vw"), width / 100, 'vw'); 89 | assert.equal(context.px("vh"), height / 100, 'vh'); 90 | assert.equal(context.px("vm"), Math.min(width, height) / 100, 'vm'); 91 | assert.equal(context.px("vd"), Math.sqrt((width * width) + (height * height)) / 100., 'vd'); 92 | assert.equal(context.px("vmin"), Math.min(width, height) / 100, 'vmin'); 93 | assert.equal(context.px("vmax"), Math.max(width, height) / 100, 'vmax'); 94 | assert.equal(context.px("thin"), 1, 'thin'); 95 | assert.equal(context.px("thick"), 5, 'thick'); 96 | assert.equal(context.px("border-thick"), 5, 'border-thick'); 97 | assert.equal(context.px("border-medium"), 3, 'border-medium'); 98 | assert.equal(context.px("larger"), 120, 'larger'); 99 | assert.equal(context.px("medium"), 16, 'medium'); 100 | assert.equal(context.px("initial"), 16, 'initial'); 101 | }); 102 | 103 | QUnit.test("quantities", function(assert) { 104 | assert.equal($.px("em"), 16, 'px'); 105 | assert.equal($.px("1em"), 16, 'px'); 106 | assert.equal($.px("2em"), 32, 'px'); 107 | assert.equal($.px("0.2em"), 3.2, 'px'); 108 | assert.equal($.px("2.2em"), 35.2, 'px'); 109 | assert.equal($.px("2.22em"), 35.52, 'px'); 110 | assert.equal($.px("2.222em"), 35.552, 'px'); 111 | assert.equal($.px("2.2222em"), 35.5552, 'px'); 112 | assert.equal($.px("0em"), 0, 'px'); 113 | assert.equal($.px("-1em"), -16, 'px'); 114 | assert.equal($.px("-2em"), -32, 'px'); 115 | assert.equal($.px("-0.2em"), -3.2, 'px'); 116 | assert.equal($.px("-2.2em"), -35.2, 'px'); 117 | assert.equal($.px("1.em"), 16, 'px'); 118 | assert.equal($.px("1.0em"), 16, 'px'); 119 | assert.equal($.px(".1em"), 1.6, 'px'); 120 | assert.equal($.px("0.1em"), 1.6, 'px'); 121 | }); --------------------------------------------------------------------------------