MathJax를 반응형으로 구현하기
MathJax에서 구현한 수식이 너무 길어서 화면의 범위를 벗어날 때, 스크롤을 통해 수식을 볼 수 있게끔 CSS를 수정하는 법.
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의 관련 문서를 찾아보기 귀찮아 왜 이게 먹히는지는 모르겠다. 그래도 일단 내 문제는 해결했으니 다행!