Fit text to parent element in ionic 2

Ionic Framework ionic-v3
1

Hi,

I’m looking for a way to style a font size relative to its parent height (similar to the jquery plugin ‘Fittext’), but I’m looking for the best way to integrate this in my angular 2 project.

Any suggestions?

1 Like
2

Did you got it working?

1 Like
3

I’m also interested. Isn’t there an ionic recommendation for this?

4

Hello,

if an element has a fixed value, then you can use css calc shown here https://css-tricks.com/a-couple-of-use-cases-for-calc/

As far as I know css calc can not retrieve the values of a css property or get it from an other element dynamic.

Angulars ngStyle let you point to a variable in .ts, where it can be calculated.

Maybe mediaquery can be used.

You can catch an html element and set its style like myElement.style.backgroundColor = “#D93600”; from ts or use addClass or related

If the text is fixed you can use svg with text as path and scale it it as any hmtl tag.

Overlay two elements and animate one with scale etc. with an js animation library.

Maybe on of the js to css librarys work

or…

Bset regards, anna-liebt