pixiv小説縦書き機能 開発の裏側 ～横のものを縦にする～ - pixiv inside [archive]
はじめましてこんにちは。pixivでアルバイトをしているhakatashiです。 さる6月10日、パソコン版pixiv小説にて縦書き表示機能がリリースされました。この開発のあらかたを担当したので、今回の縦書き機能開発における裏側を紹介いたします。 構想 縦書き機能開発にあたり、設計段階からその大部分を一任されました。小説機能開発において自分の中に絶えず理念として存在していたのは、ユーザーに最高の読書体験を提供することです。縦書きによって得られる利益を最大化し、快適な閲覧を支援するために、以下のような構想を置きました。 縦書き横書きの組版の差異における違和感を可能な限り軽減すること。 スクロールとページングを融合した、柔軟で快適な閲覧インターフェイスを提供すること。 この2点について詳しく解説します。 縦組版 まず、ウェブブラウザで縦書き表示を実現するにあたり、どのような手法をとるかという問
![pixiv小説縦書き機能 開発の裏側 ～横のものを縦にする～ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cb8c8e15c630ee29bd00c32234b431a93a2053d/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhakatashi%2F20150615%2F20150615155753.png)
縦書きレイアウトでの長音記号問題。
さてさて、長らく放置していたhtmlでの縦書きレイアウト方法です。 概要についてはコチラのページを見ていただくとして、縦書きレイアウトを実現する上で、いちばん気になっていたのが長音記号。「ー」ですね。Webブラウザ上では、この文字の縦書き字形が表示できないのです。代替案として、罫線用の縦棒を使ってごまかしています。ブラウザの種類に依存しないという点ではベターな選択なのですが、フォントによっては非常に美しくない。 ということで、ブラウザの種類に依存してしまいますが、CSS3で定義されるプロパティ「transform」を使って、美しさにこだわってみましょう。 CSS3のプロパティの実装はブラウザごとにバラつきがありますが、transformに関しては、各ブラウザの最新バージョンにおいて、 FireFox ... -moz-transform:なにがし Safari / Google Chrom
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
