├── README.md ├── demo.html ├── jquery.min-line-height.coffee └── jquery.min-line-height.js /README.md: -------------------------------------------------------------------------------- 1 | # Min-line-height: 2 | 3 | Created in response to Tim Brown's article Molten Leading: 4 | http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/ 5 | 6 | # Usage: 7 | 8 | Select applicable elements with jQuery and pass an amount: 9 | 10 | `$("#content p").minLineHeight(1.3)` 11 | 12 | The minimum line height can be supplied in the following ways - 13 | 14 | A float: 15 | `$("#content p").minLineHeight(1.3)` 16 | 17 | As ems: 18 | `$("#content p").minLineHeight("1.3rem")` 19 | 20 | As px: 21 | `$("#content p").minLineHeight("13px")` 22 | 23 | If the amount is passed as a float or any units other than px, the script will default to ems. In order for min-line-height to take effect an element must have a min-width, max-width, and default line-height (serves as the max-line-height) specified in CSS. Any element without one of the three properties will simply not get processed. 24 | 25 | # Why you can't use custom CSS properties to handle this: 26 | 27 | Ideally, specifying them min-line-height in a CSS file would be the more manageable, but research found that per the CSS 2.1 mandates browsers to ignore any unrecognized properties: 28 | 29 | http://stackoverflow.com/questions/9143501/is-it-possible-to-utilize-a-custom-css-properties-with-javascript/9143684#9143684 30 | 31 | This means the only way to access a property defined as... 32 | 33 | `-js-min-line-height: 1.3` 34 | 35 | ...would be by re-requesting the CSS file with an AJAX request and parsing the CSS file in javascript. This wouldn't be effective for a number of performance reasons. -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 13 | 18 | 19 | 20 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a dignissim lorem. Praesent aliquam augue ac massa pulvinar et consectetur ligula semper. Vivamus ornare congue velit non mattis. Nulla porta, arcu quis adipiscing tincidunt, lorem tellus egestas eros, nec auctor neque lacus eget tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tortor nulla, pretium quis ultrices in, tincidunt eu sapien. Vestibulum sed molestie neque. Vestibulum mauris leo, auctor eu vehicula sed, congue sed erat. Nullam eget mauris et lorem gravida porttitor.

21 |

Aliquam at sem eget lorem lacinia convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris est eros, commodo non lacinia eu, lobortis nec augue. Integer lobortis nulla eget lectus imperdiet eu ultrices mauris blandit. Aenean nec massa sem. Phasellus vel volutpat libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent erat arcu, imperdiet pretium elementum eu, volutpat eu nisl.

22 | 23 | -------------------------------------------------------------------------------- /jquery.min-line-height.coffee: -------------------------------------------------------------------------------- 1 | # Min-line-height: 2 | # =============================================================================== 3 | # Created in response to Tim Brown's article Molten Leading 4 | # (http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/) 5 | # 6 | # Script written by J. Jeffers - for latest please visit repository on github 7 | # (https://github.com/jimjeffers/jQuery-minLineHeight) 8 | # 9 | # Usage: 10 | # =============================================================================== 11 | # Select applicable elements with jQuery and pass an amount: 12 | # $("#content p").minLineHeight(1.3) 13 | # 14 | # The minimum line height can be supplied in the following ways: 15 | # $("#content p").minLineHeight(1.3) 16 | # $("#content p").minLineHeight("1.3rem") 17 | # $("#content p").minLineHeight("13px") 18 | # 19 | # If the amount is passed as a float or any units other than px 20 | # then the script will default to ems. 21 | 22 | jQuery.fn.minLineHeight = (amount) -> 23 | 24 | # Help parse values from various units. 25 | parseUnits = (value) -> 26 | value: parseFloat value.replace(/[a-zA-Z]/g,"") 27 | units: value.replace(/[^a-zA-Z]/g,"") 28 | 29 | # Calculates the line height for a 30 | calculateLineHeight = (element) -> 31 | # Properties 32 | width = element.width() 33 | maxWidth = parseUnits element.css("max-width") 34 | minWidth = parseUnits element.css("min-width") 35 | maxLineHeight = parseUnits element.data("max-line-height") 36 | fontSize = parseUnits element.css("font-size") 37 | 38 | # Get proper min line height. 39 | if minLineHeight.units != "px" 40 | minLineHeightPx = minLineHeight.value*fontSize.value 41 | else 42 | minLineHeightPx = minLineHeight.value 43 | 44 | # Calculations 45 | widthRange = maxWidth.value - minWidth.value 46 | currentWidthDiff = element.width() - minWidth.value 47 | widthRatio = currentWidthDiff / widthRange 48 | lineHeightRange = maxLineHeight.value - minLineHeightPx 49 | currentLineHeight = minLineHeightPx + lineHeightRange * widthRatio 50 | 51 | # Set line height 52 | element.css("line-height","#{currentLineHeight}px") 53 | element 54 | 55 | # Set min-line-height 56 | minLineHeight = parseUnits "#{amount}" 57 | 58 | # Initial array for applicable elements. 59 | elements = [] 60 | @each -> 61 | el = $(this) 62 | if el.css("max-width") != "none" and el.css("min-width") != "none" and el.css("line-height") != "none" 63 | el.attr("data-max-line-height",el.css("line-height")) 64 | elements.push calculateLineHeight el 65 | 66 | $(window).resize => 67 | for element in elements 68 | calculateLineHeight element -------------------------------------------------------------------------------- /jquery.min-line-height.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; 3 | jQuery.fn.minLineHeight = function(amount) { 4 | var calculateLineHeight, elements, minLineHeight, parseUnits; 5 | parseUnits = function(value) { 6 | return { 7 | value: parseFloat(value.replace(/[a-zA-Z]/g, "")), 8 | units: value.replace(/[^a-zA-Z]/g, "") 9 | }; 10 | }; 11 | calculateLineHeight = function(element) { 12 | var currentLineHeight, currentWidthDiff, fontSize, lineHeightRange, maxLineHeight, maxWidth, minLineHeightPx, minWidth, width, widthRange, widthRatio; 13 | width = element.width(); 14 | maxWidth = parseUnits(element.css("max-width")); 15 | minWidth = parseUnits(element.css("min-width")); 16 | maxLineHeight = parseUnits(element.data("max-line-height")); 17 | fontSize = parseUnits(element.css("font-size")); 18 | if (minLineHeight.units !== "px") { 19 | minLineHeightPx = minLineHeight.value * fontSize.value; 20 | } else { 21 | minLineHeightPx = minLineHeight.value; 22 | } 23 | widthRange = maxWidth.value - minWidth.value; 24 | currentWidthDiff = element.width() - minWidth.value; 25 | widthRatio = currentWidthDiff / widthRange; 26 | lineHeightRange = maxLineHeight.value - minLineHeightPx; 27 | currentLineHeight = minLineHeightPx + lineHeightRange * widthRatio; 28 | element.css("line-height", "" + currentLineHeight + "px"); 29 | return element; 30 | }; 31 | minLineHeight = parseUnits("" + amount); 32 | elements = []; 33 | this.each(function() { 34 | var el; 35 | el = $(this); 36 | if (el.css("max-width") !== "none" && el.css("min-width") !== "none" && el.css("line-height") !== "none") { 37 | el.attr("data-max-line-height", el.css("line-height")); 38 | return elements.push(calculateLineHeight(el)); 39 | } 40 | }); 41 | return $(window).resize(__bind(function() { 42 | var element, _i, _len, _results; 43 | _results = []; 44 | for (_i = 0, _len = elements.length; _i < _len; _i++) { 45 | element = elements[_i]; 46 | _results.push(calculateLineHeight(element)); 47 | } 48 | return _results; 49 | }, this)); 50 | }; 51 | }).call(this); 52 | --------------------------------------------------------------------------------