font unit, overflow updates and fixed examples #44
Conversation
* Added `stopOverflow`. If there is too much text then the text will still overflow outside of the div at the smallest font size. Setting stopOverflow to true will add a `.overflow` class to the seleted div if the text is overflowing. It also adds CSS which hides the text that is overflowing in order to keep the design of the page. * Added `maxLines`. Similar to stopOverflow but instead it adds the class if there is too many lines of text. This setting takes an input of `false` or a number of lines to apply the limit at. This needs to be improved but it's still useful to have now. * Added `fontUnit`. Changes the unit used in the minFontSize and maxFontSize. This allows units such as cm, mm, in, pt, pc, em, vw, vh, % and rem to be used instead of px. * Added `fontChangeSize`. This changes the amount of the font is changed by when trying to find the final font size. The default is 1 but changing this to a decimal is sometimes needed. When using rem or em font units 0.1 or 0.01 is a recommended change size.
samueljim
changed the title
STRML
left a comment
STRML
left a comment
There was a problem hiding this comment.
Thanks! A few minor bits here. This is a pretty large change without a ton of code - bravo for that!
Please exclude the example files. I need to properly .gitignore them but they're only meant for gh-pages publishing.
|
|
||
| if (settings.maxLines) { | ||
| if (Number.isInteger(settings.maxLines)) { | ||
| const computedStyle = window.getComputedStyle(innerSpan); |
There was a problem hiding this comment.
Try to avoid es6 for compatibility's sake
| const fontSize = parseFloat(computedStyle.getPropertyValue('font-size')); | ||
| // If line-height is normal, we multiply the element's font-size with 1.14 | ||
| if ( isNormal ) innerSpan.style.lineHeight = (fontSize * 1.14) + 'px'; | ||
| const lineHeight = parseFloat(computedStyle.getPropertyValue('line-height')); |
There was a problem hiding this comment.
| const lineHeight = parseFloat(computedStyle.getPropertyValue('line-height')); | |
| const lineHeightFloat = parseFloat(computedStyle.getPropertyValue('line-height')); | |
| const lineHeight = Number.isFinite(lineHeightFloat) ? lineHeightFloat : parseFloat(computedStyle.getPropertyValue('font-size') * 1.14; |
There was a problem hiding this comment.
Basically can remove the double-read here and simplify the logic a bit by simply assuming fontSize * 1.14 if lineHeight is unreadable
| // Setting the element's max-height | ||
| const limitHeight = (lineHeight * settings.maxLines); | ||
|
|
||
| innerSpan.style.maxHeight = limitHeight + 'px'; |
There was a problem hiding this comment.
If possible try to batch all reads before all writes to avoid layout thrashing
|
Really interested on this PR @STRML, any plans for bring the fontUnit options soon? Can I help you on that? |
|
Are there any news on that? It would be great to use font units. |
i should fix PR this but if you need font units and more i've made a package that can do heaps more as a web component |
|
Thanks for your quick answer. I will give it a try very soon. |
|
I tested the web component and it works with normal use, but for me it isn't working. In my case the content of the specific field will be updated every 30 seconds and therefore i have to trigger the resizing after updating the content of the span. Would it be possible with the web component or do you have another idea? |
|
I think i was too quick.... Actually it seems to work - i will give you a more detailed feedback until tomorrow. Regards André |
|
The web component should work, but I've not done much testing on it outside of my use cases. |
4 participants
stopOverflow. If there is too much text then the text will still overflow outside of the div at the smallest font size. Setting stopOverflow to true will add a.overflowclass to the selected div if the text is overflowing. It also adds CSS which hides the text that is overflowing in order to keep the design of the page.maxLines. Similar to stopOverflow but instead it adds the class if theres too many lines of text. This setting takes an input offalseor a number of lines to apply the limit at. This needs to be improved but it's still useful to have now.fontUnit. Changes the unit used in the minFontSize and maxFontSize. This allows units such as cm, mm, in, pt, pc, em, vw, vh, % and rem to be used instead of px.fontChangeSize. This changes the amount of the font is changed by when trying to find the final font size. The default is 1 but changing this to a decimal is sometimes needed. When using rem or em font units 0.1 or 0.01 is a recommended change size.Please let me know if you have any questions :)