JavaScript를 사용하여 텍스트를 부모 크기에 맞게 만들기

일부 도구는 자동으로 텍스트 크기를 조절할 수 있다

우리끼리 해보자.

1. 높이와 폭이 고정된 용기

<div class="parent">
  <div class="text-container" data-id=1>
    <span class="text">
      This Text is a bit longer
      and should be wrapped correctly
    </span>
  </div>
</div>

<div class="parent">
  <div class="text-container" data-id=2>
    <span class="text">
      This text
    </span>
  </div>
</div>

.parent {
  margin: 2%;
  width: 300px;
  height: 50px;
  padding: 15px;
  background: grey;
  color: white;
  display: block;
}

.text-container {
  width: 100%;
  height: 100%;
}

.text {
  font-size: 12px;
  display: block;
}

.text-container {
  border: 1px solid;
  width: 100%;
  height: 100%;
}

.text {
  font-size: 32px;
  display: block;
}

body {
  background: #33A;
}

오버플로우 계산

const isOverflown = ({ clientHeight, scrollHeight }) => scrollHeight > clientHeight

첫번째 실현

const resizeText = ({ element, parent }) => {
  let i = 12 // let's start with 12px
  let overflow = false
  const maxSize = 128 // very huge text size

  while (!overflow && i < maxSize) {
    element.style.fontSize = `${i}px`
    overflow = isOverflown(parent)
    if (!overflow) i++
  }

  // revert to last state where no overflow happened:
  element.style.fontSize = `${i - 1}px`
}

resizeText({
  element: document.querySelector('.text'),
  parent: document.querySelector('.text-container')
})

추가 옵션 추가

const isOverflown = ({ clientHeight, scrollHeight }) => scrollHeight > clientHeight

const resizeText = ({ element, elements, minSize = 10, maxSize = 512, step = 1, unit = 'px' }) => {
  (elements || [element]).forEach(el => {
    let i = minSize
    let overflow = false

        const parent = el.parentNode

    while (!overflow && i < maxSize) {
        el.style.fontSize = `${i}${unit}`
        overflow = isOverflown(parent)

      if (!overflow) i += step
    }

    // revert to last state where no overflow happened
    el.style.fontSize = `${i - step}${unit}`
  })
}

resizeText({
  elements: document.querySelectorAll('.text'),
  step: 0.5
})

2. 고정 너비와 자동 높이가 있는 용기

body {
  background: #A33;
}

.parent {
  margin: 2%;
  width: 150px;
  height: auto;
  min-height: 50px;
  padding: 15px;
  background: grey;
  color: white;
  display: block;
}

.text-container {
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.text {
  font-size: 12px;
  display: block;
}

.text {
  font-size: 48px;
  display: block;
}

수평 오버플로우 검사 추가

const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => (scrollWidth > clientWidth) || (scrollHeight > clientHeight)

resizeText({
  elements: document.querySelectorAll('.text'),
  step: 0.25
})

3. 고정 높이와 자동 너비가 있는 용기

body {
  background: #3A3;
}

.parent {
  margin: 2%;
  width: auto;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 15px;
  background: grey;
  color: white;
  display: inline-block;
}

.text-container {
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.text {
  font-size: 12px;
  display: block;
}

.text {
  font-size: 48px;
  display: block;
}

resizeText({
  elements: document.querySelectorAll('.text'),
  step: 0.25
})

4. 사용자가 크기를 조절할 수 있는 컨테이너

body {
  background: #333;
}

.parent {
  margin: 2%;
  width: 150px;
  height: 150px;
  padding: 15px;
  background: grey;
  color: white;
  overflow: auto;
  resize: both;
}

.text-container {
  width: 100%;
  height: 100%;
  border: 1px solid;
  display: block;
}

.text {
  font-size: 12px;
  display: block;
}

MutationObserver를 사용하여 변경 내용 살펴보기

const allParents = document.querySelectorAll('.parent')
allParents.forEach(parent => {
  // create a new observer for each parent container
  const observer = new MutationObserver(function (mutationList, observer) {
      mutationList.forEach( (mutation) => {
        // get the text element, see the html markup
        // at the top for reference
        const parent = mutation.target
        const textContainer = parent.firstElementChild
        const text = textContainer.firstElementChild

        // resize the text
        resizeText({ element: text, step: 0.5 })
    });
  })

  // let's observe only our required attributes
  observer.observe(parent, {
    attributeFilter: ['style']
  })
})

.parent {
  margin: 2%;
  width: 150px;
  height: 150px;
  padding: 15px;
  background: grey;
  color: white;
  overflow-x: auto;
  overflow-y: hidden;
  resize: both;
}

옵션: 스로틀 추가

const throttle = (func, timeFrame) => {
  let lastTime = 0
  return (...args) => {
      const now = new Date()
      if (now - lastTime >= timeFrame) {
          func(...args)
          lastTime = now
      }
  }
}

const throttledResize = throttle(resizeText, 25)

// ...
const parent = mutation.target
const textContainer = parent.firstElementChild
const text = textContainer.firstElementChild

throttledResize({ element: text, step: 0.5 })
// ...

요약

저자가 본문에서 사용한 자원