カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて (builderscon tokyo 2018) - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。先日開催されたbuilderscon tokyo 2018において「カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて」という発表を行いました。Webブラウザ上で、小説を縦組みで読むという機能に関するものです。その発表資料に補足と質疑応答の内容を加えて公開します。 なお、当日は資料を単一のHTMLファイルに切り出して、それをFirefoxで開き200%にズームした画面を映しながらプレゼンテーションしました。 カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて 自己紹介 nanto_vi (TOYAMA Nao) 株式会社はてな Webアプリケーションエンジニア Perl, TypeScript カクヨム KADOKAWA × はてな による小説投稿サイト 2016年2月正式オープン 縦組み表示 補足
【Bootstrap】印刷時に表示されるURLを消す方法 - デザイナーのタネあかし
Bootstrap を利用してwebサイトを構築した時、ページをプリントアウトするとリンクの箇所に意図していないのにURLが記載されていて驚いてしまいました。 ブラウザのプリント設定？それともほかの？・・・と調べてみたところBootstrap が原因でした。 Bootstrap の@media print が原因 Bootstrap 3 にはページ印刷の際に、リンク箇所（例えばグローバルメニュー等）のリンクURLを表示させる設定がCSSに施されていました。 bootstrap.css （v3.3.2）で192行目付近から、その print 設定がありました。 下記の内容です。 a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } CSSで、印刷
要素をスクロールに追従させる jQuery プラグイン
Apple Store のサイドバーのように、要素をウィンドウのスクロールに追従させる jQuery プラグイン、jQuery Floating Widget を作りました。説明が難しいので、まずはデモをご覧ください! jQuery Floating Widget plugin demo このアイデア自体は新しいものではなくて、たとえば以下の記事で詳しく紹介されています: Fixed Floating Elements | jQuery for Designers - Tutorials and screencasts この方法で基本的にうまくいくんですが、フッターの高さがある程度あると、下までスクロールしたときに該当要素がフッター領域に食い込んでしまう場合があります。そこで、上記記事での実装を参考に、要素の「動ける範囲」を制限するための処理などを加えたものを考えてみました。 例として、フ
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
I love software!: 次期 AH Formatter について（２） 個別 アーカイブ
本日も AH Formatter の時期バージョン AH Formatter V6 の新機能についてご紹介します。AH Formatter V6 では、ルビや圏点機能について機能拡張を行います。 これにより、いままで inline-container で表現していたルビを本来のルビとして指定ができるようになります。 以下はルビを指定した場合の例です。 ルビの指定では、ルビが親文字よりはみ出した場合の処理や、ルビ文字幅を自動的に圧縮したり、親文字の両側にルビを指定したりすることが可能です。 以下は圏点を出力した例です。 圏点とルビを併用することもできます。 以上、２日にわたって 次期バージョンの AH Formatter V6 について簡単にご紹介しましたが、その他の情報などを、CSS組版ブログにてご紹介しております。また、ブログ内では AH Formatter とその関連技術（XSL、CS
CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
css3-text-layout（W3C）におけるウェブ縦書き議論の現場報告
もしかして、これ、大変なことを議論してない？ と思ってまとめてみました。W3CのML原文に当たっていないため、なにか誤解しているかもしれません。また抜けもあるかも。どうかご容赦されたし。
CSS3で縦書きスタイルを、電子出版の未来のために。日本発で提案中
日本語には縦書き表記が存在しますが、HTMLやCSSなどのWeb標準には縦書きのためののプロパティや機能はまだ十分ではありません。これまではHTMLやCSSの用途が、Webブラウザで参照するWebサイトを記述する用途にほぼ絞られていたため、このことはほとんど問題になりませんでした。 しかし今後HTMLとCSSは、電子書籍のフォーマットとしても使われることになりそうです。オープンな電子書籍ファイルフォーマット規格として普及が始まっている「EPUB」は、HTMLとCSS（それに画像ファイルなど関連ファイル）で記述されます。これにより当然ながら、EPUBによる電子書籍で日本語の縦書きのニーズが高まることが考えられるため、CSSなどによる充実した縦書きのサポートは欠かせないものとなります。 EPUBでの充実した縦書きレイアウトを実現すべく、かつてW3CでXML1.0の仕様策定に関わったマークアップ
CSSに関して「おめーら、なに考えてんだよ」と腹が立ってしまう疑問 - 檜山正幸のキマイラ飼育記 (はてなBlog)
次のHTMLコードなんですが： <ul style="color:red"> <li>NoStyle</li> <li style="color:LightSlateGray">LightSlateGray</li> <li style="color:SlateGray">SlateGray</li> <li style="color:DarkSlateGray">DarkSlateGray</li> </ul> <ul style="color:red"> <li>NoStyle</li> <li style="color:LightGray">LightGray</li> <li style="color:Gray">Gray</li> <li style="color:DarkGray">DarkGray</li> </ul> 一箇所、IEでは思い通りに表示できない箇所があります。F
日本語組版処理の要件（日本語版）
1.1 このドキュメントの目的 すべての文化集団は，独自の言語，文字，書記システムを持つ．それゆえ，個々の書記システムをサイバースペースに移転することは，文化的資産の継承という意味で，情報通信技術にとって非常に重要な責務といえよう． この責務を実現するための基礎的な作業として，このドキュメントでは，日本語という書記システムにおける組版上の問題点をまとめた．具体的な解決策を提示することではなく，要望事項の説明をすることにした．それは，実装レベルの問題を考える前提条件をまず明確にすることが重要であると考えたからある． 1.2 このドキュメントの作成方法 このドキュメントの作成は，W3C Japanese Layout Task Forceが行った．このタスクフォースは，次のようなメンバーで構成され，ユーザーコミュニティーからの要望と専門家による解決策を調和させるために様々な議論を行ってきた．
PDFソフトならアンテナハウスのオンラインショップ
2023年06月01日自在眼発売終了のお知らせ自在眼は、2023年7月31日で販売を終了いたします。 サポートは2024年7月31日で終了します。 長らくの間ご愛顧を賜り、誠にありがとうございました。2022年10月20日『瞬簡PDF 統合版 13』を2022年10月20日新発売4つのソフトを同梱したお得なパッケージがバージョンアップ! 『瞬簡PDF 統合版 13』を2022年10月20日新発売 今回のバージョンアップでは【瞬簡PDF 書けまっせ】が新バージョンとなり、64ビット対応やユーザーインターフェイスの見直し、手書き、差込み機能など様々な機能が強化されています。2023年02月07日価格改定のお知らせ下記製品について2月13日から価格を改定いたします。 XSL-FOの基礎 - XMLを組版するためのレイアウト仕様 第2版 925円(税抜き)→930円(税抜き) スタイルシート開発の
テーブルを魅せる10のCSS | エンタープライズ | マイコミジャーナル
table要素はWebページにとってなくてはならないものだ。しかしデザインや設定が難しい要素でもある。テーブルを簡潔に記述しつつCSSで優れたデザインを提供したいところだが、Webブラウザ間の差異もありなかなか希望通りの設定ができない。そこでR.Christie氏がSmashing Magazineにおいて公開しているTop 10 CSS Table Designsに注目したい。XHTML 1.0に準拠したテーブルを順次CSSを使ってカスタマイズしていくというもので、見やすい上に説明も簡潔でわかりやすい。WebデザイナやWebデベロッパは一度チェックしておきたいドキュメントだ。コンテンツは次の10の内容で構成されている。 Horizontal Minimalist Vertical Minimalist Box Horizontal Zebra Vertical Zebra Style O
IE8、CSS 2.1互換性向上 - 2,500越えるCSS 2.1互換試験をW3Cへ提案 | エンタープライズ | マイコミジャーナル
Internet Explorer 8 Microsoftの次期メジャーWebブラウザとなるIE8は、これまでのIEシリーズとは異なりオープンスタンダードへの準拠率がきわめて高いものになるかもしれない。Internet Explorer Test Manager, Jason Upton氏はIEBlog - Additional Tests Submitted to the W3C CSS 2.1 Test Suiteにおいてその取り組みの一端を紹介している。 The IE teamはIE8 Beta 2のリリースへ向けて活発に開発を継続しつつ、同時にCSS 2.1への準拠率を向上させるためにCSS 2.1に基づいたテストケースの開発にも取り組んでいるという。同テストケースはWindows Internet Explorer Testing Centerで公開され簡単に試験できるようになっ
Firefox 3隠れた新機能、ソフトハイフンとインラインブロック | エンタープライズ | マイコミジャーナル
スケジュール通りに進めば一ヶ月後にはFirefoxの最新版、Firefox 3がリリースされる。前評判は上々だ。パフォーマンスは向上するし便利な新機能も満載している。ベータやRCを使い始めているユーザも多いだろう。すでに多数のプレビュー記事が公開されているが、ここでは視点をずらして、Firefox 3で登場する目立たないが便利な機能を紹介しているKevin Yank氏のTwo Hidden Features New in Firefox 3を紹介したい。 同氏は同記事においてFirefox 3に登場する目立たない機能としてソフトハイフンとinline-blockを紹介している。ソフトハイフンは「」で表現される改行してもいいポイントを指定するためのハイフンだ。通常は表示されないが、改行が必要になった場合にはハイフンが表示され、その部分で改行するようになる。Firefox 3が登場すると主要
Re: Firefox 3 の修正内容のご紹介 その2 - IE 独自拡張 CSS: ime-mode プロパティのサポート - すめるまん Broken Diary - WebStudio
もずはっく日記(2008年5月) 2008年5月27日 Re: Firefox 3 の修正内容のご紹介 その2 - IE 独自拡張 CSS: ime-mode プロパティのサポート - すめるまん Broken Diary 初回投稿日時: 2008年05月27日03時45分29秒 カテゴリ: CSS SNS: Tweet (list) 念のために書いておきますが、以下は完全に私見です。 前のmarqueeタグ実装の時みたいな政治的絡みからの問題じゃないだろうし、ime-modeは静かに消滅してもらいたいですね。 私の考えは全く逆で、ime-modeの機能はなんらかの形で標準仕様化してもらいたいと思っています。それができるとは考えていないのですが。 私は前職でとある企業のシステム開発をやっていました。システムはWebベースではなく、Windowsネイティブでしたが、そのシステムではime
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なんでCSSすぐ死んでしまうん
日本電子出版協会、EPUB日本語拡張仕様セミナーを開催 ～EPUB3における縦書きやルビなど日本語組版の現状を報告
CSS Cheat Sheet
CSSMENUMAKER.COM