replace-font-sizes

Replace all fonts sizes by preferred ones.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         replace-font-sizes
// @namespace    http://tampermonkey.net/
// @version      202312190930
// @description  Replace all fonts sizes by preferred ones.
// @author       Rafael David Tinoco
// @match        http*://*/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

;(function () {
  'use strict'

  var fixedWidthFonts = [
    'Monospace',
    'Courier',
    'Courier New',
    'Consolas',
    'Monaco',
    'Menlo',
    'Fire Mono',
    'Liberation Mono',
    'Monospace',
    'Noto Mono',
    'Roboto Mono'
  ]

  var domainFontSettings = [
    {
      domain: 'twitter.com',
      minFontSize: 18,
      maxFontSize: 18,
      minFixedWidthFontSize: 18,
      maxFixedWidthFontSize: 18,
      lineHeight: 1.2,
      fixedWidthLineHeight: 1.2
    },
    {
      domain: 'github.com',
      minFontSize: 17,
      maxFontSize: 24,
      minFixedWidthFontSize: 17,
      maxFixedWidthFontSize: 17,
      lineHeight: 1.2,
      fixedWidthLineHeight: 1.2
    },
    {
      domain: 'google.com',
      minFontSize: 16,
      maxFontSize: 22,
      minFixedWidthFontSize: 16,
      maxFixedWidthFontSize: 22,
      lineHeight: 0,
      fixedWidthLineHeight: 0
    },
    {
      domain: 'openai.com',
      minFontSize: 18,
      maxFontSize: 18,
      minFixedWidthFontSize: 18,
      maxFixedWidthFontSize: 18,
      lineHeight: 1.4,
      fixedWidthLineHeight: 1.2
    }
  ]

  function adjustFontSize (node) {
    let currentDomain = window.location.hostname
    let fontFamily = window.getComputedStyle(node).fontFamily.toLowerCase()
    let fontSize = parseFloat(window.getComputedStyle(node).fontSize)
    let isFixedWidth = fixedWidthFonts.some(font =>
      fontFamily.includes(font.toLowerCase())
    )

    let applicableSettings = domainFontSettings.find(setting =>
      currentDomain.includes(setting.domain)
    )
    if (!applicableSettings) return

    let newFontSize = 0
    let newLineHeight = 0

    let {
      minFontSize,
      maxFontSize,
      minFixedWidthFontSize,
      maxFixedWidthFontSize,
      lineHeight,
      fixedWidthLineHeight
    } = applicableSettings

    if (isFixedWidth) {
      if (fontSize < minFixedWidthFontSize) {
        newFontSize = minFixedWidthFontSize
      }
      if (fontSize > maxFixedWidthFontSize) {
        newFontSize = maxFixedWidthFontSize
      }
      if (fixedWidthLineHeight) {
        newLineHeight = fixedWidthLineHeight
      }
    } else {
      if (fontSize < minFontSize) {
        newFontSize = minFontSize
      }
      if (fontSize > maxFontSize) {
        newFontSize = maxFontSize
      }
      if (lineHeight) {
        newLineHeight = lineHeight
      }
    }

    if (newFontSize) {
      node.style.fontSize = `${newFontSize}px`
    }
    if (newLineHeight) {
      node.style.lineHeight = `${newLineHeight}em`
    }
  }

  function observeDOMChanges () {
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            adjustFontSize(node)
            node.querySelectorAll('*').forEach(adjustFontSize)
          }
        })
        if (mutation.type === 'attributes') {
          adjustFontSize(mutation.target)
        }
      })
    })
    observer.observe(document, {
      childList: true,
      subtree: true,
      attributes: true
    })
  }

  window.addEventListener('load', () => {
    document.querySelectorAll('*').forEach(adjustFontSize)
    observeDOMChanges()
  })

  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('*').forEach(adjustFontSize)
  })
})()