CSS의 꿈 세로쓰기: 전자책처럼 페이지 단위로 페이지 사연 보내기

이 글은 《DWANGO Advent Calendar 2018》 14일째 되는 글이다.

3줄

전자책처럼 페이지 단위로 페이지를 보내는 세로쓰기 웹을 만들고 싶다

남용column-width하면 됩니다

고구마

전자 서적 같은 페이지를 보내는 것은 무엇입니까?

↑ 바로 이런 것(iOS의 북스)
애니메이션 자체는 말할 것도 없고, 일반 전자책에서는 종이책이나 PDF 판독기처럼 한 페이지 한 페이지 보낼 수 있다.
좀 더 자세하게 말하자면, 매 페이지의 위아래 좌우에 모두 페이지의 간격이 있다.
다른 한편, Google 웹에서 CSS를 세로로 쓰는 것은 보통 이렇게 됩니다.

↑ 가로 스크롤약쑥의 세로쓰기 화면)
웹 페이지이기 때문에 페이지가 당연히 굴러갑니다!그렇긴 하지만 요즘은 인터넷에서도 로컬 애플리케이션처럼 진행될 수 있기 때문에 전자책 같은 페이지 발송을 실현할 수 있다면 도전해 보고 싶습니다.

순조롭지 못한 방법: 열심히 분할하다

2년 전 나는 "사전에 몇 페이지<div>만 하고 가로로 서라!"
뭐랄까

화면의 사이즈와 같은 크기로 제작<div>

본문을 유입

넘쳐흐르면 다음<div>을 만들어 저쪽으로 흘러들어간다

영원히 반복하다.
이미지

<div>絹商人のハリスは商用がすんで南ドイツを故国へ帰る途中、この際</div>
<div>ひとつシュトラスブルクから登山鉄道に乗って、じつに三十年もの</div>
<div>歳月を経たこんにち改めて母校を訪ねてみようと、とつぜん思いつ</div>
...

언뜻 보기에 정면공격법은 상당히 괜찮고 실제 행동은 변동이 있지만 아래의 문제는 산더미 같다.

원래 처리가 너무 느려요.

넘침 여부를 판단하기 위해 DOM의 사이즈

만 볼 수 있다

'조금만 더→보기<div> 사이즈'영원히 반복

매번 브라우저의 렌더링이 나타나는데 대단합니다

요소의 중간에 분할이 필요하면 고통스러워요.

예<a href="〜">とっても長い文章</a>시

<a> 중간에 페이지가 필요할 수 있음

<div>
  〜〜<a href="〜">こんに</a>
</div>
<div>
  <a href="〜">ちはー！</a>〜〜
</div>

이런 일이 발생할 수 있고 설치도 번거로우며 무엇보다도 메스꺼움><;
당시에 나는 방법을 생각해 볼 수 있을지 생각하고 있었지만, 사실 이런 방법은 도저히 피할 수 없어서, 나는 포기했다

나는 생각났다. 열을 사용할 수 있지 않을까?

CSS에는 column-width 속성이 있으며, 이 속성을 사용하여 열판을 만들 수 있습니다.

<div class="sample">ここに文章〜〜〜〜</div>
<style>
.sample {
  column-width: 350px;
}
</style>

그리고 이것은 물론 세로 CSS에서도 사용할 수 있다.

<div class="sample">ここに文章〜〜〜〜</div>
<style>
.sample {
  /* 縦書き指定 */
  writing-mode: vertical-rl;

  column-width: 350px;
  height: 350px; /* column-width と同じ値を入れる */
}
</style>

이렇게 되면 이렇게 될 거야.

...응?뭘 봤냐!!

열의 각 구획을 전자 서적의 한 페이지 단위로 간주함으로써 스스로 나누지 않아도 된다는 느낌을 나타낼 수 있다!

실제로 해봤어요.

프레젠테이션 페이지

코드: https://github.com/rutan/swipe-vertical-text

권장 Chrome or Firefox

컴퓨터도 실행할 수 있으니 마우스로 교환하도록 노력하세요!

왜 그래?

우선 3열<div>/次ページ用/現在ページ用를 준비한다.
그런 다음 각 텍스트에 수직 쓰기 + 前ページ用가 지정된 모든 텍스트/CSS를 삽입합니다.
이 바탕column-width의 요소는 좌표를 한 페이지 위로 이동합니다.
또한 次ページ用의 요소는 좌표를 한 페이지 아래로 이동합니다.
이렇게 하면 가운데는 현재 페이지, 왼쪽은 다음 페이지, 오른쪽은 앞 페이지가 나란히 표시됩니다.
여분이 남아있는 부분前ページ用 등이 안 보이네요.
JavaScript를 사용하여 스위칭 작업을 설치한 경우 프레젠테이션 페이지와 같은 모양새가 가능합니다.

높이 계산 정보

'한 페이지를 엇갈리게 한다'는 말은 쉽게 하지만 한 페이지의 높이가 얼마인지, 아니면 전체가 몇 페이지인지는 사전에 결정할 수 없다.이것은 브라우저의 화면 크기에 따라 달라지기 때문에, 그린 후에 반드시 크기를 얻어서 계산해야 한다.
그러나 안타깝게도 세로로 뻗어 있는 것처럼 보이는 DOM의 높이를 설정overflow: hidden하더라도 뻗지 않았을 때의 사이즈를 회복한다.길어 보이지만 브라우저에 노출된 것뿐이야...
따라서 지정column-width된 요소 중 물건(즉 본문 부분)의 마지막 요소의 좌표를 얻으면 전체의 길이를 조사할 수 있다.
방금 연설문 원고에는 마지막에 빈 column-width를 넣고 원소의 좌표를 계산해야 한다.
이해하기 쉽게 시연에서 계산용 요소에 빨간색을 칠했다.본문의 마지막 빨간색 봉은 사이즈를 계산하는 요소입니다.

이 방법의 장점과 단점

장점

주위의 처리를 브라우저에 수직으로 쓰기

<div> 중간에 페이지를 바꾸면 어떡하죠...이런 것들을 고려할 필요 없어요

일반 청결

자력분할보다 훨씬 빠르다

좋지 않은 곳

"카몬"의 갈고리를 볼 수 있습니다.

페이지를 이동할 때 위치가 바뀐 부분을 볼 수 있습니다.

한 요소를 더 준비하면 얼렁뚱땅 넘어갈 수 있을 것 같은데...?

말하자면 3개를 배치하면 해결이라고 할 수 있을까...?

응, 좋은 방법이라고 생각했는데 완벽한 효과가 없었어.
하지만 방법을 잘 사용하고 전단지를 넣는 사기는 자력분할보다 현실적이다!

총결산

우리는 CSS에서 전자서적을 세로로 쓰는 것처럼 페이지 단위로 페이지를 보내는 방법을 모색해 보았다.
그리고 교묘하게 이용<a>과 디스플레이 구역을 통해 시뮬레이션을 할 수 있다.
하지만 실제 운용을 위해서는 조금 더 머리를 써야 할 부분이 많다.
나는 절대로 세로로 소설을 읽고 싶은 편이기 때문에 언젠가는 브라우저에서 가장 높은 세로쓰기 체험을 체험할 수 있기를 기대한다!