font unit, overflow updates and fixed examples #44
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* 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
reviewed
Feb 1, 2021
|
|
||
| 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.
Suggested change
| 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? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 :)