韮蕾(にらのつぼみ)
韮つぼみ
天婦羅か炒め物にと少し分けていただいたニラのつぼみ。
やはり花言葉があって「多幸」

- Read More
オクラの時よりももう少し単純化してみました。
見出しと文章の並び順は、direction 書式でなく、単にposition 書式と 右フロートでそれぞれ位置指定することにして、縦組非対応のブラウザーで横組になっても不自然でない位置に調整。<section class="sekki"> <h3>韮つぼみ</h3> <p>天婦羅か炒め物にと少し分けていただいたニラのつぼみ。 <br />やはり花言葉があって「多幸」</p> <img src="/paramy/files/stanza/nira/nira201309.jpg" width="240" height="240" alt="韮つぼみ" /> </section> /* CSS */ section.sekki { position:relative; } section.sekki img { float:left; } section.sekki h3, section.sekki p { unicode-bidi:bidi-override; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } section.sekki h3 { position:absolute; top:20px; right:16px; } section.sekki p { width:140px; /*横組になった時の幅*/ height:280px; float:right; margin:36px 36px 0 0; /*見出しが横組になっても重ならない位置 */ }
-
オクラの時よりももう少し単純化してみました。
見出しと文章の並び順は、direction 書式でなく、単にposition 書式と 右フロートでそれぞれ位置指定することにして、縦組非対応のブラウザーで横組になっても不自然でない位置に調整。<section class="sekki"> <h3>韮つぼみ</h3> <p>天婦羅か炒め物にと少し分けていただいたニラのつぼみ。 <br />やはり花言葉があって「多幸」</p> <img src="/paramy/files/stanza/nira/nira201309.jpg" width="240" height="240" alt="韮つぼみ" /> </section> /* CSS */ section.sekki { position:relative; } section.sekki img { float:left; } section.sekki h3, section.sekki p { unicode-bidi:bidi-override; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; } section.sekki h3 { position:absolute; top:20px; right:16px; } section.sekki p { width:140px; /*横組になった時の幅*/ height:280px; float:right; margin:36px 36px 0 0; /*見出しが横組になっても重ならない位置 */ }
2013.09.09
オクラ-縦書き

これは単純に文字も含めた一枚の画像に保存してあるだけですが、縦書きのレイアウトは未だにあまり見かけません。
CSS3で縦書き書式 ”writing-mode” が採用されても、未対応ブラウザーもありますし、htmlベースで縦組は面倒というか結構、課題ありです。
- Read More
もちろんタイプフェイス(書体のデザイン)も重要な要素なのですが、画像化、SVG、PDF埋め込み以外だと、現時点ではWeb フォントを導入するくらいしか方法がなさそうなので、レイアウトだけ考えてみます。
横の文字列を縦にするだけなら簡単そうですが、画像・見出し・文章と3要素あります。HTMLは
<div id="okra-tate"> <img id="okra-img02" src="/paramy/files/stanza/okra/okra02_1309.jpg" width="160" height="160" alt="オクラの花" /> <div id="okra-con"> <h3>秋葵<span>「OKRA」</span></h3> <p>字源は原産地ガーナのnkramaに由来するらしいが、レモンのように外来語。 ---略 --- </p> </div> </div> /* CSS */ #okra-con h3, #okra-con p{ unicode-bidi:bidi-override; /*英数字回転*/ -ms-writing-mode: tb-rl; /* (1) IEで縦書-右から左*/ writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; /* (1) Safari/Chromで縦書-右から左*/ }
- まず、3要素に縦組と文字方向を右から左の指定で、文字は縦組になるが、画像-見出し-文章の3要素は上から下に表示される。
- 3要素を包んでいるdiv#okra-tate に表示方向:右→左を指定
起点が右からになるが、文字が下から上向きになってしまう - 見出しと文章に表示方向上から下を追加
#okra-tate { direction: rtl; /* (2)-右から左(Right to Leftの略でしょうか?)*/ } #okra-con h3, #okra-con p{ direction: ltr; /* (3)追加---組方向左から右(縦だから上から下?) unicode-bidi:bidi-override; -ms-writing-mode: tb-rl; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; }
縦書きが表示できないブラウザーでも大枠のレイアウトが崩れないように写真を左にフロート、見出しと文章を包む div#okra-con を右フロートします。
余白とマージンを適当に調整。#okra-img02 { width:160px; float:left; margin:30px 0 0 30px; } #okra-con { width:260px; float:right; } #okra-con h3, #okra-con p{ direction: ltr; unicode-bidi:bidi-override; -ms-writing-mode: tb-rl; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; } #okra-con h3 { float:right; margin-right:12px; } #okra-con p{ margin-right:64px; margin-top:30px; height:270px; } #okra-con p span { text-indent:1em; font-size:90%; }
秋葵「OKRA」
字源は原産地ガーナのnkramaに由来するらしいが、レモンのように外来語。
意外というか当然というか花言葉があって「恋によって身が細る」
要するに恋わずらいですね。
花の誕生日:八月十五日SVG(非対応のブラウザーの場合代替JPEG)
-
もちろんタイプフェイス(書体のデザイン)も重要な要素なのですが、画像化、SVG、PDF埋め込み以外だと、現時点ではWeb フォントを導入するくらいしか方法がなさそうなので、レイアウトだけ考えてみます。
横の文字列を縦にするだけなら簡単そうですが、画像・見出し・文章と3要素あります。HTMLは
<div id="okra-tate"> <img id="okra-img02" src="/paramy/files/stanza/okra/okra02_1309.jpg" width="160" height="160" alt="オクラの花" /> <div id="okra-con"> <h3>秋葵<span>「OKRA」</span></h3> <p>字源は原産地ガーナのnkramaに由来するらしいが、レモンのように外来語。 ---略 --- </p> </div> </div> /* CSS */ #okra-con h3, #okra-con p{ unicode-bidi:bidi-override; /*英数字回転*/ -ms-writing-mode: tb-rl; /* (1) IEで縦書-右から左*/ writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; /* (1) Safari/Chromで縦書-右から左*/ }
- まず、3要素に縦組と文字方向を右から左の指定で、文字は縦組になるが、画像-見出し-文章の3要素は上から下に表示される。
- 3要素を包んでいるdiv#okra-tate に表示方向:右→左を指定
起点が右からになるが、文字が下から上向きになってしまう - 見出しと文章に表示方向上から下を追加
#okra-tate { direction: rtl; /* (2)-右から左(Right to Leftの略でしょうか?)*/ } #okra-con h3, #okra-con p{ direction: ltr; /* (3)追加---組方向左から右(縦だから上から下?) unicode-bidi:bidi-override; -ms-writing-mode: tb-rl; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; }
縦書きが表示できないブラウザーでも大枠のレイアウトが崩れないように写真を左にフロート、見出しと文章を包む div#okra-con を右フロートします。
余白とマージンを適当に調整。#okra-img02 { width:160px; float:left; margin:30px 0 0 30px; } #okra-con { width:260px; float:right; } #okra-con h3, #okra-con p{ direction: ltr; unicode-bidi:bidi-override; -ms-writing-mode: tb-rl; writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl; } #okra-con h3 { float:right; margin-right:12px; } #okra-con p{ margin-right:64px; margin-top:30px; height:270px; } #okra-con p span { text-indent:1em; font-size:90%; }
秋葵「OKRA」
字源は原産地ガーナのnkramaに由来するらしいが、レモンのように外来語。
意外というか当然というか花言葉があって「恋によって身が細る」
要するに恋わずらいですね。
花の誕生日:八月十五日SVG(非対応のブラウザーの場合代替JPEG)
2013.09.05
残暑お見舞い-svg

レイアウト崩れを防ぐには画像化するのが一番確実なのですが、文字情報がなくなります。
- Read More
Adobe Illustrator_CCからSVG保存したものをインライン埋込み
写真:岡山西川アイプラザAdobe Illustrator_CCからSVG1.1/使用文字埋込みで保存。
imgタグで.svgファイルを読み込むのでなく、記事内に直接SVGのコードを入れています。
エリア内文字やシアーなど、HTML+ CSSではかなり面倒そうなレイアウトで試してみました。ブラウザーによって字間が少し崩れたり、フォント情報は無視されたりですが、テキストが選択できるのはありがたい。
問題は少し前のブラウザーだとSVG表示に対応していないことですね。- 元のIllustrator ファイル:1.9 MB(画像は150ppiで埋込み)
- PDF:167 KB(同ファイルから画像圧縮JPEG<画質:高>・PDF1.7で保存)
- SVG:491 KB
SVG非対応ブラウザーに考慮したら、やはり代替画像も用意してobject タグで表示させる方がよさそうです。
SVGの対応状況など、渡辺竜さんのRruverサイトのページを参考にさせていただきました。
PDF埋込み
-
Adobe Illustrator_CCからSVG保存したものをインライン埋込み