Yinjie - GitHub.io

如同其它所有的显示图像，漫画也已趋数字化。在其过渡阶段中，逐步出现了可缩放图片、动图、视差效果等。但是在很多的时候，数字漫画总会有一个不如意的地方：用户只能不断的从一边拉"条"到了另一边，或是使用那种让图片一张一张刷新显现的不友好导航。

在我看来，Flexbox是一个非常好的针对这类漫画场景的响应式设计方式：在完全支持它的浏览器中， Flex元素可以被看成是一个个的"画面"，多行的Flex容器可以被看成是"栏"。

制作漫画

为证明这个理论，我制作了个简单的论据---一张Mai An Noa的图画。用PhoteShop切成了三部分，每一份是一个独立的JPEG图片。

整合成HTML代码如下：

<div id="strip">
    <figure id="panel1">
        <img src="/images/flexbox/5main-1.webp" alt="A photograph of a man kneeling in a parking garage, pleading for his life">
        <figcaption>“WAIT…”</figcaption>
    </figure>
    <img src="/images/flexbox/5miain-mid.webp" alt id="panel2">
    <figure id="panel3">
        <img src="/images/flexbox/5main-2.webp" alt="A backlit photograph of a man pointing a gun">
        <figcaption>CLICK</figcaption>
    </figure>
</div>

为使连续的图画水平放置，我将图画的容器设制成flex，几张分离的图像进行垂直排列。

#strip { display: flex; justify-content: space-between; align-items: center; }

（注意：为了简单起见，在上面的示例中只显示最终的flexbox属性。）

一般情况下，这几张图片会水平占满容器空间。为了改变这种情况，并在每张画上加上字幕我们给每张画加上width和position属性。

#panel1 { width: 40%; position: relative; }
#panel3 { width: 33%; position: relative; }

此时也想到可以用border-image属性给大量的字幕加上边框。

#strip img {
    border-image: url('frame.png') 22 16 16 22;
    background: #000;
    border-width: 12px;
    border-style: solid;
}

最终，给字幕加上给应景的Sequentialist字体。

#strip figcaption {
    background: #fff;
    font-size: 1.2rem;
    padding: 1rem;
    display: inline-block;
    position: absolute;
    top: 2rem;
    right: -2rem;
    font-family: Sequentialist BB, Comic Sans, cursive;
    border-image: url('lettering-frame.png') 11 10 14 12;
    border-width: 6px;
    background-clip: padding-box;
}

给每个字幕的视觉效果稍作处理。

#panel1 figcaption { letter-spacing: .3rem; }
#panel3 figcaption { left: -2rem; width: 4rem; font-style: italic; }

flexbox的内容是自适应的。在较窄的窗口下，中间的的图画在设计上不再显示(没有字幕的不重要)，所以把它隐藏掉。

@media screen and (max-width: 45rem) {
    #panel2 {
        display: none;
    }
}

某种情况下，垂直排列能够更方便的阅读

@media screen and (max-width: 40rem) {
    #strip {
        flex-direction: column;
    }
    #panel1,
    #panel3 {
        width: 60%;
    }
    #panel3 {
        align-self: flex-end;
    }
}

可以通过flexbox改变漫画的显示顺序来讲述一个不同的故事，这也是件很有趣的事。

@media screen and (max-width: 40rem) {
    #panel1 {
        order: 3;
    }
    #panel3 figcaption {
        display: none;
    }
}

总结

这样的设计方式可以使静态的、固定显示的漫画过渡成响应式显示，还利于搜索，自适应的动态变换使其在任何设备上都方便浏览。这项技术也提供了一个新的可能性：根据设备的屏幕的方向与大不创造出一个不寻常的阅读体验，和一种潜在的故事情节，或借助flex-grow(渐进增长)与shrink(收缩)来构建一个动态中间框架。

另一方面，可以使漫画跨越文化差异。传统的日本漫画被设计成从右往左的阅读模式，而西方国家的漫画都是从左往右的形式。 flexbox提供了一个CSS属性writing-direction(书写方向)，用这个属性可以在任何一个语言环境下将漫画“翻译”成符合其文化习惯的方式来阅读。

Flexbox构建响应式图片

制作漫画

总结