|
|
@@ -252,16 +252,37 @@ $gk28daysLeft = max(0, (int)floor(($gk28Ts - $todayMidnight) / 86400));
|
|
|
|
|
|
<!-- 内容层 -->
|
|
|
<div style="position:relative;z-index:1;">
|
|
|
+ <style>
|
|
|
+ /* 竖排文字：逐字竖直排列，不依赖 writing-mode:vertical-rl（Firefox 下该属性会把汉字压扁/渲染成空白） */
|
|
|
+ .wyoj-vtext {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .wyoj-vtext>span {
|
|
|
+ display: block;
|
|
|
+ line-height: 1.3; /* 等价于原来的 letter-spacing: 0.3em */
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <?php
|
|
|
+ // 把一段文字拆成"每字一个 span"，交给上面的 flex 纵向排列
|
|
|
+ $wyoj_vtext = function ($text) {
|
|
|
+ $html = '';
|
|
|
+ foreach (preg_split('//u', $text, -1, PREG_SPLIT_NO_EMPTY) as $ch) {
|
|
|
+ $html .= '<span>' . htmlspecialchars($ch, ENT_QUOTES, 'UTF-8') . '</span>';
|
|
|
+ }
|
|
|
+ return $html;
|
|
|
+ };
|
|
|
+ ?>
|
|
|
<div class="d-flex justify-content-center align-items-center">
|
|
|
- <div style="writing-mode:vertical-rl;font-size:1.5rem;font-weight:bold;letter-spacing:0.3em;line-height:1;">
|
|
|
- <?= $monthText ?>
|
|
|
- </div>
|
|
|
+ <div class="wyoj-vtext"><?= $wyoj_vtext($monthText) ?></div>
|
|
|
<div class="mx-4" style="font-size:5rem;font-weight:600;line-height:1;">
|
|
|
<?= $dayNum ?>
|
|
|
</div>
|
|
|
- <div style="writing-mode:vertical-rl;font-size:1.5rem;font-weight:bold;letter-spacing:0.3em;line-height:1;">
|
|
|
- <?= $weekText ?>
|
|
|
- </div>
|
|
|
+ <div class="wyoj-vtext"><?= $wyoj_vtext($weekText) ?></div>
|
|
|
</div>
|
|
|
<div class="text-center mt-4" style="font-size:1rem;letter-spacing:0.05em;">
|
|
|
<?php if ($daysLeft > 0): ?>
|
