马黑黑 发表于 2022-1-4 14:50

岳阳楼记

本帖最后由 马黑黑 于 2022-1-4 23:23 编辑 <br /><br /><style type="text/css">
.wr_mode {
        margin: 4px auto;
        padding:12px;
        background:rgba(128,122,128,0.6);
        width:700px;
        height:400px;
        border:5px double olive;
        writing-mode:vertical-rl;
        font-family:"SimSun";
        font-size:18px;
        text-shadow:1px 1px 2px silver;
}

</style>
<div class="wr_mode">
<h2>岳阳楼记</h2>
<p>&nbsp; &nbsp; &nbsp; &nbsp;宋·范仲淹</p>
<p>庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废俱兴。乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。</p>
<p>予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯;朝晖夕阴，气象万千。此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？</p>
<p>若夫霪雨霏霏，连月不开，阴风怒号，浊浪排空；日星隐耀，山岳潜形;商旅不行，樯倾楫摧;薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。</p>
<p>至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳；岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。</p>
<p>嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲;居庙堂之高则忧其民；处江湖之远则忧其君。是进亦忧，退亦忧。然则何时而乐耶?其必曰：“先天下之忧而忧，后天下之乐而乐”乎。噫！微斯人，吾谁与归？</p>
<p>时六年九月十五日。</p>

</div>

马黑黑 发表于 2022-1-4 15:05

文字是可以竖排的，可以使用CSS的 writing-mode 来实现。writing-mode 有三个值：
horizontal - 常规方向
vertical-rl - 垂直排版，文本流自右向左
vertical-lr - 垂直排版，文本流自左向右

其中的 vertical-rl 合适古文竖排。汉字的好处是竖排后文字不会躺平。

但竖排对长篇文本可能不好控制，更适用于短小精悍的古诗词，以及美美帖中的少量文字。

试看代码：

<div style="width:200px;margin:0 auto;padding:20px;border:1px solid #aaa;writing-mode:vertical-rl;">
    Hello CSS 水吧人民欢迎您
</div>

就一个 writing-mode 指令，文本就竖排了，汉字站着，英文都平躺着。

马黑黑 发表于 2022-1-4 15:06


<div style="width:200px;margin:0 auto;padding:20px;border:1px solid #aaa;font-size:24px;writing-mode:vertical-rl;">
    Hello CSS 水吧人民欢迎您
</div>

加林森 发表于 2022-1-4 15:09

真好看，太漂亮了。如果把岳阳楼的图片配在旁边就更加完美了。

马黑黑 发表于 2022-1-4 15:12

<p>我们老用 div，其实 p 标签也可以的：<br>&nbsp;</p>

<p style="writing-mode:vertical-rl;">白日依山盡，<br>黃河入海流。<br>欲窮千里目，<br>更上一層樓。</p>

马黑黑 发表于 2022-1-4 15:13

加林森 发表于 2022-1-4 15:09
真好看，太漂亮了。如果把岳阳楼的图片配在旁边就更加完美了。

這個可以的，你試試

加林森 发表于 2022-1-4 15:15

马黑黑 发表于 2022-1-4 15:13
這個可以的，你試試

好的好的

马黑黑 发表于 2022-1-4 15:16

加林森 发表于 2022-1-4 15:15
好的好的

{:4_190:}

红影 发表于 2022-1-4 16:18

马黑黑 发表于 2022-1-4 15:06
Hello CSS 水吧人民欢迎您

这个看到了英文躺着了{:4_173:}

马黑黑 发表于 2022-1-4 19:08

红影 发表于 2022-1-4 16:18
这个看到了英文躺着了

所以用英文写对联还是挺麻烦的

杨柳青 发表于 2022-1-4 21:45

习惯横排~~看竖排吃力~~喜欢写诗的不妨用用~~

红影 发表于 2022-1-4 21:47

马黑黑 发表于 2022-1-4 19:08
所以用英文写对联还是挺麻烦的

这个特别适合用来录入古诗词{:4_199:}

马黑黑 发表于 2022-1-4 22:10

红影 发表于 2022-1-4 21:47
这个特别适合用来录入古诗词

应用场景还是有的

马黑黑 发表于 2022-1-4 22:11

杨柳青 发表于 2022-1-4 21:45
习惯横排~~看竖排吃力~~喜欢写诗的不妨用用~~

自由诗也不用这么排

马黑黑 发表于 2022-1-4 22:49

当使用了 writing-mode 的竖排模式，容器的 width 和 height 需要交换。一楼原贴我用平板做，当时感觉可以，晚上用大显示器看才发现不对，是我忽视了竖排模式引发的排版上的一些影响。

加林森 发表于 2022-1-5 07:16

现在更加好看了。

马黑黑 发表于 2022-1-5 07:30

加林森 发表于 2022-1-5 07:16
现在更加好看了。

对。有资料说过 writing-mode 设为 vertical-rl、vertical-lr 时盒子的高宽要对调，我忽略了这个

加林森 发表于 2022-1-5 07:37

马黑黑 发表于 2022-1-5 07:30
对。有资料说过 writing-mode 设为 vertical-rl、vertical-lr 时盒子的高宽要对调，我忽略了这个

是的，昨晚正在制作你这个帖，结果又停电了。我只有睡觉去了。

马黑黑 发表于 2022-1-5 08:19

加林森 发表于 2022-1-5 07:37
是的，昨晚正在制作你这个帖，结果又停电了。我只有睡觉去了。

你那经常停电呀

加林森 发表于 2022-1-5 08:21

马黑黑 发表于 2022-1-5 08:19
你那经常停电呀

我们这里不太会的，与省委挨着的，可能是在调整吧。
页: [1] 2 3
查看完整版本: 岳阳楼记