最近使用 MPC-HC 播放器看电影，其默认字幕样式是衬线字体，发现衬线字体搭配电影画面颇有一种优雅的意味。另外许多外文电影我仍难以做到只看外文字幕顺畅观影。这两点让我非常想通过制作台词图片的方式，保留影视作品中画面和文字的优美，并辅助自己学习英文。所以打算在我的数字花园 dors 中增加一个【影墨留香】功能，收集、制作和展示影视截图和台词。
今天终于初步确定了台词图片的样式。目前的设计颇为简洁，一张图片中约一半的部分，加上黑色半透明渐变遮罩，文字置于影视截图的上部或下部，英文使用 Georgia 字体（允许回退为默认的 serif ），中文就使用默认的 serif 字体（一般显示为宋体），横宽的 2/3 用来展示台词内容，1/3 展示作品名称（这个比例还可以再调整一下）。再采用绝对定位在台词的右上角加上一个引号的 icon，这样就构成了一张精美的 quote 图片。
当然整个影墨留香的功能应包含台词输入、列表管理、集合展示等功能。
输入的数据包括配图，英文、中文、生词列表（复用之前开发的词条解析器）、译文（其样式参考了豆瓣2022年度电影榜单中的一些设计）、台词位置配置信息（顶部或底部、是否单独为台词框加上渐变背景）。
列表管理当然就是增删改查，管理操作直接复用已有的增删改查的 store 和页面模型。
还要考虑的一个重大问题是图片台词列表如何组织、展示、切换，最好预览功能是要做成 ppt 风格的左右滑动切换，这一点 slidev 已然做的成熟，但这个功能不可能依托 slidev 来做，我不希望图片需要编译后才能生成。于是一种思路是考虑做成 svg，然后用项目中已集成的 photoswipe 这个库来实现滑动切换，看看能不能基于它来魔改，否则就只能重新开发一套类似 ppt 展示的功能，比较头大。