search

datchley / react-scale-text

A React library to keep an element's text scaled to fit it's container
MIT License
54 stars 18 forks source link

Handle absolute positioned children? #1

Closed datchley closed 6 years ago

datchley commented 7 years ago

When child is absolutely positioned, dynamically checking for overflow/underflow becomes problematic in that you have to use getBoundingClientRect() and compare the top, left, bottom and right positions of the child with the parent to determine overflow, since absolute positioned children are taken out of the normal layout flow.

For example, a child that is horizontally/vertically centered in its parent:

<div className="parent" style={{ position: 'relative' }}>
  <ScaleText>
    <span className="child" style={{ position: 'absolute', transform: 'translate(-50%,-50%)', top: '50%', left: '50%' }}>Hello</span>
  </ScaleText>
</div>

From testing, it looks best if we handle scaling for position: absolute children using css transform: translate(-50%, -50%) scale(<factor>), where the factor is the minimum of the difference between parent/child width and parent/child height.

Ideas on keeping this scale transition smooth are appreciated.

datchley commented 7 years ago

Upon further testing, I think using CSS transform/scale is making too many assumptions about the child content. I don't want to start adding dynamic styling that makes assumptions about content or mistakenly modifies the content in a way that breaks the page or module.

I think sticking to just modifying font-size and determining overflow using getBoundingClientRect() for absolutely positioned child elements is the simplest and best route.

datchley commented 7 years ago

Does this even make sense, in the case of absolute positioned elements within a static positioned parent? At that point, the abs positioned element is no longer considered a child of the parent from a flow standpoint and the concept of 'scale to parent' doesn't really make sense, since the parent is not the uppermost 'relative' positioned parent or the window.

Thoughts?