개발자 매뉴얼 | 글자 크기

글자 크기(벡엔드)

글자 크기는 모든 글자 크기의 배율을 조정하는 스타일을 삽입하여 변경합니다.

/***** routes/style.js *****/

// 기존의 글자 크기 스타일시트 제거
const html_data = css_manager.delStyle(req.body.html_data, style_category) || example_html_data;

// 새로 설정할 글자 크기 스타일시트 선언
const style = `${internal_selector} { font-size: ${parseInt(text_size)}% !important; }`;

// 새로운 스타일시트 추가
const result = css_manager.addStyle(html_data, style, style_category+' '+style_name);

위와 같은 스크립트를 이용하여 아래와 같은 스타일이 추가됩니다.

font-size: 100% !important; /* MIN (DEFAULT) */
font-size: 200% !important; /* MAX */

글자 크기(프론트)

textSize state를 사용하여 값을 100부터 200까지 조절하고 서버에 요청을 보낸다.

// src/app.js에서 부터 각각의 컴포넌트에 props로 내려준 정보들을 함께 묶어 이벤트를 호출한다.
// 이벤트 발생 시 서버에 요청하는 함수
  const requestAPI = async (api_event, current_url)=>{
    let res;
    if(api_event[2]){
      setTextSize(api_event[2]);
    }

// 오리지널 모드는 캐싱을 사용한 원본 페이지에 텍스트 크기 요청을 함께 묶어 요청한다.

    if(api_event[1] === 'original'){
      res = request_style(request_url, tempOrignPage, [...api.text_sizing, textSize])
    } else {
      res = request_style(request_url, renderHTML, api_event, current_url);
    }

    res.then((res)=>{
      return res.text();
    })
    .then((html)=>{
      setHTML(html);
    })
  }

// src/RanderSlider.js
// 글자 크기 조절을 위한 버튼을 누를 시 해당 함수가 호출되고 setState 함수가 호출된다.
// 또한 props로 내린 app.js의 requestAPI 함수를 호출하여 서버에 요청을 보낸다.
    const upRange = ()=>{
        if(gage<200){
            bar.current.style.width = (gage-90) +"%";
            setGage(gage+10);
            props.e([...props.api, gage+10]);
        } else {
            bar.current.style.width = "100%";
        }
    };