CODEWITHSUNDEEP
vue.jsheightrender
Olga
Olga

Reputation: 129

Is there a way to measure height of the element before render in Vue.js?

I need to render many text items on the page by grouping them into several blocks. To group items to blocks I need to kno number of lines each text item will have to calculate how many items each block can take. I also know exact width of eack block before render but I don't know the height of each text item.

How can I figure out the amount of lines of each text item before render to know how many of them can be put in one block?

Previously we used canvas to measure text of each item and calculat number of lines with the help of measureText() method. But what we found out is that canvas does not know about word-break property and that we don't break words when rendering text of the items. Therefore canvas calculates 2 lines instead of 3 and so on. The calculations are wrong.

Is there another way to measure number of text lines before render in Vue.js or vanilla JS?

Upvotes: 1

Views: 1133

Answers (1)

floodlitworld
floodlitworld

Reputation: 625

Generally speaking, no. There are hundreds of factors that could affect the dimensions of an element such as fonts installed, accessibility settings, browser extensions, browser settings, viewport size, device pixel density and browser peculiarities in rendering.

The easiest way would be to render the items in a way that they are not visible to the user, but still on the page, and then use Javascript to get the calculate dimensions of the element before then making them visible.

Upvotes: 1

Related Questions