javascript、html、cssを用いて縦書き文字列のカッコ囲み表示を実現したい

実現したいこと

javascript、html、cssを用いて縦書き文字列のカッコ囲み表示をさせたいです。
現時点ではhtmlとcssにて画像のような形には表示ができましたが、ページを跨いだ場合にカッコが意図しない位置にずれてしまいます。
そこでjavascriptも使うことで画像の表示ができないかと考えました。

※青線は加工した状態で、段跨ぎ、ページ跨ぎをしても表示としてはこの状態にしたいです。

試したhtmlとcss

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8" />
5	<link rel="stylesheet" href="style.css" />
6</head>
7
8<body>
9
10<p class="frame-box-002">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
11
12<p class="frame-box-003">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
13</body>
14
15</html>

css
1
2body {
3 /*  組方向（縦組み） */
4 writing-mode: vertical-rl;
5 text-orientation: upright;
6 /* 2段 */
7 column-fill: auto;
8 columns: 2;
9 column-gap: 49px;
10}
11
12
13.frame-box-002 {
14  padding: 10px;
15  position: relative;
16}
17
18.frame-box-002::before, .frame-box-002::after {
19  content: '';
20  width: 10px;
21  height: 100%;
22  position: absolute;
23}
24
25.frame-box-002::before {
26  border-left: solid  1px #000000;
27  border-top: solid  1px #000000;
28  border-bottom: solid  1px #000000;
29  top: 0;
30  left: 0;
31}
32
33.frame-box-002::after {
34  border-right: solid  1px #000000;
35  border-top: solid  1px #000000;
36  border-bottom: solid  1px #000000;
37  top: 0;
38  right: 0;
39}
40
41.frame-box-003 {
42  padding: 10px;
43  position: relative;
44}
45
46.frame-box-003::before, .frame-box-003::after {
47  content: '';
48/*  width: 15px;
49  height: 100%;*/
50  width: 100%;
51  height: 10px;
52  position: absolute;
53}
54
55.frame-box-003::before {
56  border-left: solid  1px #000000;
57  border-top: solid  1px #000000;
58  border-right: solid  1px #000000;
59  top: 0;
60  left: 0;
61}
62
63.frame-box-003::after {
64  border-right: solid  1px #000000;
65  border-bottom: solid  1px #000000;
66  border-left: solid  1px #000000;
67  bottom: 0;
68  right: 0;
69}
70

yambejp

2022/06/08 07:08

「ページを跨いだ」の定義をお願いします

wkbsyt

2022/06/08 07:50

「ページを跨ぐ」という定義ですが、最終的にこの縦書きのhtmlをpdfに変換して使いたいためカッコで囲まれる文字が増えて１ページ目から２ページ目にかかったとしても、カッコの表示は前のページからの続きで表示させて、カッコによって文字が囲まれている状態を維持したいです。

yambejp

2022/06/08 07:57

cssのメディアprint/screenを合わせる感じですか？ (pdfに出力＝printだと勝手に推測)

wkbsyt

2022/06/08 08:06

印刷用定義を設けて縦書き２段で出力させるように考えています。

行動規範の内容に同意します

回答1件

自己解決

一旦以下の方法で表示することができましたので、自己解決とさせていただきます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8" />
5	<link rel="stylesheet" href="css/style.css" />
6</head>
7
8<body>
9
10
11
12<p>行方向の多倍カッコ</p>
13
14<p>ブラケット</p>
15<div class="v-bai-paren v-bracket">
16<p><span class="v-bracket-start"></span>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
17<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです<span class="v-bracket-end"></span></p>
18</div>
19
20<p>パーレン</p>
21<div class="v-bai-paren v-parenthesis">
22<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
23<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
24<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
25</div>
26
27
28<p>亀甲パーレン</p>
29<div class="v-bai-paren v-kikko">
30<p><span class="v-kikko-start"></span>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
31<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです<span class="v-kikko-end"></span></p>
32</div>
33
34<p>　</p>
35<p>　</p>
36<p>　</p>
37<p>　</p>
38<p>　</p>
39<p>　</p>
40
41<p>字詰め方向の多倍カッコ</p>
42
43<p>ブラケット</p>
44<div class="h-bai-paren h-bracket">
45<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
46<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
47</div>
48
49<p>パーレン</p>
50<div class="h-bai-paren h-parenthesis">
51<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
52<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
53</div>
54
55
56<p>亀甲パーレン</p>
57<div class="h-bai-paren h-kikko">
58<p><span class="h-kikko-start"></span>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです</p>
59<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです<span class="h-kikko-end"></span></p>
60
61
62</body>
63
64</html>

css
1body {
2 /*  組方向（縦組み） */
3  -webkit-writing-mode: vertical-rl;
4  -ms-writing-mode: tb-rl;
5  writing-mode: vertical-rl;
6 /* 2段 */
7 column-fill: auto;
8 columns: 2;
9 column-gap: 49px;
10}
11
12/* 多倍カッコ共通 */
13/* 上下につく多倍カッコ */
14.v-bai-paren {
15  padding: 10px;
16  position: relative;
17  border-top: solid 1px #000000;
18  border-bottom: solid 1px #000000;
19}
20/* 左右につく多倍カッコ */
21.h-bai-paren {
22  padding: 10px;
23  position: relative;
24  border-right: solid 1px #000000;
25  border-left: solid 1px #000000;
26}
27
28/* 縦カッコ*/
29/* ブラケット*/
30.v-bracket::before {
31  content: '';
32  width: 100%;
33  height: 10px;
34  position: absolute;
35  border-right: solid 1px #000000;
36  top: -1px;
37  left: 0;
38  right: 0;
39}
40
41.v-bracket .v-bracket-end:last-child::before {
42  content: '';
43  width: 100%;
44  height: 10px;
45  position: absolute;
46  border-left: solid 1px #000000;
47  top: -1px;
48  left: 0;
49  right: -1px;
50}
51
52.v-bracket::after {
53  content: '';
54  width: 100%;
55  height: 10px;
56  position: absolute;
57  border-left: solid 1px #000000;
58  bottom: -1px;
59  left: 0;
60  right: -1px;
61}
62
63.v-bracket .v-bracket-start:first-child::after {
64  content: '';
65  width: 100%;
66  height: 10px;
67  position: absolute;
68  border-right: solid 1px #000000;
69  bottom: 0;
70  left: 0;
71  right: 0;
72}
73
74/* パーレン*/
75.v-parenthesis {
76 border-radius: 20px 20px 20px 20px;
77}
78
79/* 亀甲パーレン*/
80.v-kikko::before {
81  content: '';
82  width: 100%;
83  height: 20px;
84  position: absolute;
85  border-right: solid 1px #000000;
86  transform: SkewX(30deg);
87  top: 0;
88  left: 0;
89  right: -5px;
90}
91
92.v-kikko .v-kikko-end:last-child::before {
93  content: '';
94  width: 100%;
95  height: 20px;
96  position: absolute;
97  border-left: solid 1px #000000;
98  transform: SkewX(-30deg);
99  top: 0;
100  left: 0;
101  right: 5px;
102}
103
104.v-kikko::after {
105  content: '';
106  width: 100%;
107  height: 20px;
108  position: absolute;
109  border-left: solid 1px #000000;
110  transform: SkewX(30deg);
111  bottom: 0;
112  right: 5px;
113  left: 0;
114}
115
116.v-kikko .v-kikko-start:first-child::after {
117  content: '';
118  width: 100%;
119  height: 20px;
120  position: absolute;
121  border-right: solid 1px #000000;
122  transform: SkewX(-30deg);
123  bottom: 0;
124  right: -5px;
125  left: 0;
126}
127
128/* 横カッコ*/
129/* ブラケット*/
130.h-bracket::before, .h-bracket::after {
131  content: '';
132  width: 10px;
133  height: 100%;
134  position: absolute;
135}
136
137.h-bracket::before {
138  border-top: solid  1px #000000;
139  border-bottom: solid  1px #000000;
140  top: -1px;
141  right: -1px;
142}
143
144.h-bracket::after {
145  border-top: solid  1px #000000;
146  border-bottom: solid  1px #000000;
147  top: -1px;
148  left: -1px;
149}
150
151/* パーレン*/
152.h-parenthesis {
153  border-radius: 20px 20px 20px 20px;
154}
155
156/* 亀甲パーレン*/
157.h-kikko::before {
158  content: '';
159  width: 20px;
160  height: 100%;
161  position: absolute;
162  border-bottom: solid  1px #000000;
163  transform: SkewY(-30deg);
164  top: 5px;
165  right: 0;;
166  bottom: 0;
167}
168
169.h-kikko .h-kikko-end:last-child::before {
170  content: '';
171  width: 20px;
172  height: 100%;
173  position: absolute;
174  border-top: solid  1px #000000;
175  transform: SkewY(30deg);
176  top: -6px;
177  right: 0;;
178  bottom: 0;
179}
180
181
182.h-kikko::after {
183  content: '';
184  width: 20px;
185  height: 100%;
186  position: absolute;
187  border-top: solid  1px #000000;
188  transform: SkewY(-30deg);
189  top: -6px;
190  left: 0;
191  bottom: 0;
192}
193
194.h-kikko .h-kikko-start:first-child::before {
195  content: '';
196  width: 20px;
197  height: 100%;
198  position: absolute;
199  border-bottom: solid  1px #000000;
200  transform: SkewY(30deg);
201  top: 5px;
202  left: 0;
203  bottom: 0;
204}