MathJax를 반응형으로 구현하기

MathJax 덕분에 HTML에서도 \(\TeX\) 문법을 갖고 아주 쉽게 수식을 쓸 수 있다. 그러나 문제는, 우리의 블로그는 에이전트에 따라 가로폭이 바뀌는 반응형 웹이라는 데에 있다.

MathJax는 변환된 구문을 고정된 크기의 블록 형태로 나타낸다. 때문에, 가령 다음과 같이 긴 수식은 좁은 모바일 화면에서 한번에 보이지 않는다:$$
\forall x((Fx\land Gx)\land(\forall y)(Fy\rightarrow x=y)\tag{DefDes}$$

$$\forall x((Fx\land Gx)\land(\forall y)(Fy\rightarrow x=y)\tag{DefDes}$$

MathJax에서도 줄바꿈^linebreaking을 설정할 수 있기는 하지만, 난점이 있다. 한편으로, 수식의 의도되지 않은 줄바뀜은 수식의 의미를 오도되게 만들 수 있다. 다른 한편으로, MathJax의 줄바꿈 기능을 리소스를 많이 잡아먹는 탓에 개발자 측에서는 해당 기능을 권장하지 않고 있다.

포럼을 찾아 보니 역시나 많은 이들이 이로 인한 고민을 하고 있었다. 그런 한편, 위키백과에서는 긴 수식들도 스크롤을 통해 모바일 환경에서 볼 수 있음을 우리는 안다. 어떻게 한 것일까?

일단 포럼의 스레드에서 주로 추천해주는 것은 다음을 CSS에 삽입하는 것이다:

   mjx-container {
    overflow-x: auto; /* 스크롤만을 구현하려 할 때, "auto" 대신 "scroll"을 써도 된다. */
    overflow-y: hidden;
    max-width: 100%;
    }

그런데 이 코드를 넣었음에도 나의 Ghost 블로그에서는 스크립트가 작동하지 않았다. 하여 더 찾아보니, 워드프레스 포럼에 관련 스레드가 있었다. 나는 일단 인라인 수식에서 문제를 겪는 것은 아니었으므로(상식적으로, 인라인 수식의 문제는 줄바꿈으로만 해결될 것이고, 그정도로 긴 수식이면 블럭으로 제시하는 게 맞다), 스레드를 참조해 다음 스크립트를 삽입하여 문제를 해결했다:

   mjx-container {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    }

  .MathJax {
    min-width: 0 ! important
    }

이제 PC에서도 다 띄울 수 없는 아래의 긴 수식도 스크롤을 통해 읽을 수 있음을 확인할 수 있다(이렇게 긴 수식은 수동 줄바꿈을 하는 게 맞겠다만):$$\forall x((Fx\land Gx\land Hxa)\land(\forall y)(Fy\rightarrow x=y)\iff\forall x\forall y((Fy\leftrightarrow(x=y)\land (Gx\land Hxa))\tag{ComplDefDes}$$

$$\forall x((Fx\land Gx\land Hxa)\land(\forall y)(Fy\rightarrow x=y)\iff\forall x\forall y((Fy\leftrightarrow(x=y)\land (Gx\land Hxa))\tag{ComplDefDes}$$

MathJax의 관련 문서를 찾아보기 귀찮아 왜 이게 먹히는지는 모르겠다. 그래도 일단 내 문제는 해결했으니 다행!