stanza

七夕前夜の雲隠れ

2022.0803（旧暦7月6日）
FUJIFILM X-A7
MAKSY60 + NIKON Teleconverter TC-14 （1.4×テレコンバータ）

立秋（8月7日｜旧暦7/10）の少し前、七夕前夜の月です。
雲に隠れるところまでにトリミング。

Read More 天体は全く疎いのにMAKSY60というおもちゃのような望遠鏡を買ってしまいました。 とはいえ、さすがに天体望遠鏡、まだ月しか写してませんが、手元にある古い500mmミラーレンズよりしっかり解像しています。 地上で望遠レンズとして使っても面白そうです。 SIGHTRON カメラアダプター MAKSY60用 Tリング-NIKONアダプタ Nikon TC14 (×1.4テレコンバータ) Nikon Fマウント-Fuji Xマウントアダプタ という組み合わせで直焦点撮影です。 MAKSY60の対物焦点距離が750mm、テレコン1.4倍で1050mm（APS-Cカメラなので換算焦点距離1575mm）の焦点距離となります。 後日、少し雲にかかった小望月が撮影できたので、BGM追加したものをnoteの方にアップしました。 2022.8月3日(旧暦7月6日)七夕前夜の月

天体は全く疎いのにMAKSY60というおもちゃのような望遠鏡を買ってしまいました。
とはいえ、さすがに天体望遠鏡、まだ月しか写してませんが、手元にある古い500mmミラーレンズよりしっかり解像しています。
地上で望遠レンズとして使っても面白そうです。

SIGHTRON カメラアダプター MAKSY60用
Tリング-NIKONアダプタ
Nikon TC14 (×1.4テレコンバータ)
Nikon Fマウント-Fuji Xマウントアダプタ

という組み合わせで直焦点撮影です。

MAKSY60の対物焦点距離が750mm、テレコン1.4倍で1050mm（APS-Cカメラなので換算焦点距離1575mm）の焦点距離となります。

後日、少し雲にかかった小望月が撮影できたので、BGM追加したものをnoteの方にアップしました。

2022.8月3日(旧暦7月6日)七夕前夜の月

追記を閉じる

2022.08.07

立冬

2021年11月19日の月蝕

2021.11.19（旧暦10月15日） 18:15〜20:00

久々のフィルムカメラ　Olympus PEN-FT
F.ZUIKO f4/200mm x2.0TeleConverter
OM-PEN マウントアダプタ使用

Read More 使う機会もなく埋もれていた昔のハーフサイズカメラ まったく話が変わりますが、ロモグラフィーShopのユニークカメラコーナーにLomoKinoムービーカメラという手回しのムービーカメラがあります。 35mmフィルムで144フレーム撮影可能という事なので、5f/秒で撮れば30秒弱のショートムービーが作れる訳です。 144コマということはハーフサイズの72枚撮りをさらに2分割した状態ですね。 これを参考にPENにフィルム遮光枠のようなものを取り付けて96枚撮り(35mm判3分割）とか144枚撮り（4分割）の撮影ができないか考えてみたのですが、2重露光を繰り返しながらカリカリと音をたよりにフィルムを巻き上げていっても、多分コマがかなりズレてしまうでしょうね。元々巻き上げが怪しいカメラですし。まぁトイカメラとしては面白いかもしれませんが・・・。 巻き上げレバーがなく（ギアで巻き上げ）、フィルム巻き上げと無関係にシャッターが切れるDianaシリーズだと工夫の余地があります。 →Diana Miniの巻き上げカチカチガイド（36枚撮りフィルムで53枚の写真を撮る方法） ブローニー判のDiana F+でも35mmフィルムバックを改造すれば一コマのサイズが調整できそうです。 →35mm Back+で撮影された美しいDiana F+ 写真 話はPENに戻りますが、何より秒数コマのような早ワザはとても無理なので断念して、普通にタイムラプスもどきで写したものです。 といってもマニュアル露光のカン頼みですし、ブレとかコマずれとか失敗カットもあって、3分間インターバルというのも正確ではありません。 当時は200mmの望遠しか持っていませんでしたし、デジカメでなくフィルムで撮る意味もよくわかっていません。 パーフォレーション（フィルムの穴）ごとスキャンできるのが嬉しい(^^;くらいでしょうか。 BGMはBand in a Boxで適当作成です。

使う機会もなく埋もれていた昔のハーフサイズカメラ

まったく話が変わりますが、ロモグラフィーShopのユニークカメラコーナーにLomoKinoムービーカメラという手回しのムービーカメラがあります。
35mmフィルムで144フレーム撮影可能という事なので、5f/秒で撮れば30秒弱のショートムービーが作れる訳です。

144コマということはハーフサイズの72枚撮りをさらに2分割した状態ですね。
これを参考にPENにフィルム遮光枠のようなものを取り付けて96枚撮り(35mm判3分割）とか144枚撮り（4分割）の撮影ができないか考えてみたのですが、2重露光を繰り返しながらカリカリと音をたよりにフィルムを巻き上げていっても、多分コマがかなりズレてしまうでしょうね。元々巻き上げが怪しいカメラですし。まぁトイカメラとしては面白いかもしれませんが・・・。

巻き上げレバーがなく（ギアで巻き上げ）、フィルム巻き上げと無関係にシャッターが切れるDianaシリーズだと工夫の余地があります。

→Diana Miniの巻き上げカチカチガイド（36枚撮りフィルムで53枚の写真を撮る方法）

ブローニー判のDiana F+でも35mmフィルムバックを改造すれば一コマのサイズが調整できそうです。

→35mm Back+で撮影された美しいDiana F+ 写真

話はPENに戻りますが、何より秒数コマのような早ワザはとても無理なので断念して、普通にタイムラプスもどきで写したものです。
といってもマニュアル露光のカン頼みですし、ブレとかコマずれとか失敗カットもあって、3分間インターバルというのも正確ではありません。
当時は200mmの望遠しか持っていませんでしたし、デジカメでなくフィルムで撮る意味もよくわかっていません。
パーフォレーション（フィルムの穴）ごとスキャンできるのが嬉しい(^^;くらいでしょうか。

BGMはBand in a Boxで適当作成です。

追記を閉じる

2021.12.01

白露

うしまろび

野分あと
ふねの輝跡に
友おもひ
うしまろふ空
ひとまろひける

※牛転（うしまろび）・・・「牛窓」の地名の由来とされる

iPhone5s のパノラマ機能、結構いいかげんな手持ちで100度くらい。

数年前に鬼籍に入った友人が牛窓に船を係留していて、ミニクルージングを楽しんだことを思い出しました。（合掌）

Read More 画像はNikon Image Spaceにアップしていたものからリンクで使用。 一応のニコンユーザーなので、せっかくの20GBを活用しましょう。 ニコンイメージスペースには元画像（iPhone5sだと800万画素）のままアップしておいて、BlogリンクのS/M/L/HDから適当書き出しサイズを選べばその大きさの画像が生成されているようです。 ホームページを置いているサーバの容量節約の意味もありますが、ブログ用とかでわざわざリサイズしなくてすむから便利です。このあたりはGooglePicasa と同じですね。

画像はNikon Image Spaceにアップしていたものからリンクで使用。
一応のニコンユーザーなので、せっかくの20GBを活用しましょう。

ニコンイメージスペースには元画像（iPhone5sだと800万画素）のままアップしておいて、BlogリンクのS/M/L/HDから適当書き出しサイズを選べばその大きさの画像が生成されているようです。
ホームページを置いているサーバの容量節約の意味もありますが、ブログ用とかでわざわざリサイズしなくてすむから便利です。このあたりはGooglePicasa と同じですね。

追記を閉じる

2015.09.18

大暑

花火

花火---旭川---

単純にWebフォントのテスト
iPhone5s 手持ち
しかし、夜空にオートフォーカスが効いているのだろうか？

単純にWebフォントのテスト
iPhone5s 手持ち
しかし、夜空にオートフォーカスが効いているのだろうか？

Read More: 追記を閉じる

2014.08.02

立冬

柿

柿　KAKI

あまりに日本的な果物なのでしょう、つるべ落としの夕日に映える柿の木は原風景を感じてしまいます。
色指定をやっていても、春になると桜色を使いたくなるように秋になるとついつい柿色を使いがちです。

Read More 印刷会社でよく使われている大日本インキ化学（DIC）の見本帳『日本の伝統色』にも「柿色（DIC-N732）」や「柿渋色（DIC-N751）」のカラーチップがあります。特色の印刷物の場合はこのチップが色見本になります。 WebではRGBか16進のコードを指定する必要がありますが、今回はDICの番号がわかっているので「DICデジタルカラーガイド」というもので探してみます。 下のスクリーンショットは iPhone 版のものです。 詳細情報として下記の数値が表示されます。 柿色 DIC-N732 インク配合値（重量比） FGメジューム: 69.4 FG31橙17.0 FG28金赤13.0 FG85墨: 0.6 Adobe RGB: 215, 123, 92 sRGB: 241, 124, 90 HTML: F17C5A マンセル: 9.4R 6.4/11.0 プロセスCMYK アート紙: C0, M60, Y60, K0 マット紙: C0, M59, Y62, K0 上質紙: C0, M65, Y61, K0 他にも広色域インキ湧水（wakimizu）用CMYK値や、6カラーCMYKOG値が表示されます。 柿渋色 DIC-N751 インク配合値（重量比） FGメジューム: 56.7 FG31橙: 19.0 CG用ピンク: 16.0 FG85墨: 0.6</br /> Adobe RGB: 157, 108, 98 sRGB: 174, 108, 98 HTML: AE6C62 マンセル: 7.7R 5.2/6.1 プロセスCMYK アート紙: C30, M62, Y56, K0 マット紙: C30, M65, Y59, K0 上質紙: C30, M74, Y92, K0 DIC のカラーガイドですから DICのインキを使うことが前提でしょうね。CMYK値は、この特色の近似色をプロセスカラーインキを使った4色カラー印刷で擬似的に表現しようとするデータですが、CMYKの色再現域は、あまり広いとはいえず、出せない色も結構あります。インクメーカー毎に発色特性も違うでしょうから、印刷でのシビアな色指定は相当難儀なものです。色によっては 4色カラー + 特色で印刷しないと無理と言われることもよくあります。 せっかく2つのカラースペース用のRGB値があるので、Adoe RGB と sRGB で上記の値を指定してみます。左から Adobe RGB（プロファイル埋込み）、sRGB（プロファイル埋込み）、Adobe RGB（プロファイルなし）、sRGB（プロファイルなし）です。 再現目標の色が同じでもカラースペースが違えばRGBの値が違ってしまうわけですが、最近のブラウザーは埋め込みプロファイルを解釈して色管理してくれるようです。左から3つ目のものはAdobeRGBのプロファイルがないので、ブラウザーが多分sRGBと見なしているのでしょう。 RGBデータからCMYK変換して印刷というのもよくありそうです。再現域が違うので色落ちはやむを得ないのですが、RGBの素性がわからない場合はさらに問題です。 左から Adobe RGB→ CMYK（Japan Color 2001 Coated ）→ （Web表示用に）sRGB（プロファイル埋込み） sRGB→ CMYK → sRGB Adobe RGB を sRGB の色空間で開く→ CMYK →s RGB （Adobe RGBの色空間で作られたデータなのに、プロファイルがなかったのでsRGBのデータと判断してCMYK変換をしてしまったという想定） sRGB を Adobe RGB の色空間で開く→ CMYK →s RGB （sRGBの色空間で作られたデータなのに、プロファイルがなかったのでAdobe RGBのデータと判断してCMYK変換をしてしまったという想定） 枠はsRGB（プロファイル埋込み） 左の二つは変換を繰り返しても色のリレーがそこそこうまく行ってますが、色空間の選択を間違えた右二つは色化けしてしまいました。CMYK変換目的で由来のわからないRGBを開く時は、作業用色空間の選択に注意が必要です。 このデジタルカラーガイドは、iPhone / iPad / Andoroid それぞれのアプリがあります。 iOS も Andoroid OS も現時点でカラー管理機能がないので、これだけで印刷用の色指定するのは不安が残りますが、DICのカラーガイド1〜6巻、日本の色、フランスの色、中国の色と9巻分の色情報が検索できるので、デザインの参考や打合せの資料としてはかなり役立ちそうです。

印刷会社でよく使われている大日本インキ化学（DIC）の見本帳『日本の伝統色』にも「柿色（DIC-N732）」や「柿渋色（DIC-N751）」のカラーチップがあります。特色の印刷物の場合はこのチップが色見本になります。

WebではRGBか16進のコードを指定する必要がありますが、今回はDICの番号がわかっているので「DICデジタルカラーガイド」というもので探してみます。

下のスクリーンショットは iPhone 版のものです。

詳細情報として下記の数値が表示されます。

柿色 DIC-N732

インク配合値（重量比）
　　FGメジューム: 69.4
　　FG31橙17.0
　　FG28金赤13.0
　　FG85墨: 0.6

Adobe RGB: 215, 123, 92

sRGB: 241, 124, 90

HTML: F17C5A

マンセル: 9.4R 6.4/11.0

プロセスCMYK

アート紙: C0, M60, Y60, K0

マット紙: C0, M59, Y62, K0

上質紙: C0, M65, Y61, K0

他にも広色域インキ湧水（wakimizu）用CMYK値や、6カラーCMYKOG値が表示されます。

柿渋色 DIC-N751

インク配合値（重量比）
　　FGメジューム: 56.7
　　FG31橙: 19.0
　　CG用ピンク: 16.0
　　FG85墨: 0.6</br />

Adobe RGB: 157, 108, 98

sRGB: 174, 108, 98

HTML: AE6C62

マンセル: 7.7R 5.2/6.1

プロセスCMYK

アート紙: C30, M62, Y56, K0

マット紙: C30, M65, Y59, K0

上質紙: C30, M74, Y92, K0

DIC のカラーガイドですから DICのインキを使うことが前提でしょうね。CMYK値は、この特色の近似色をプロセスカラーインキを使った4色カラー印刷で擬似的に表現しようとするデータですが、CMYKの色再現域は、あまり広いとはいえず、出せない色も結構あります。インクメーカー毎に発色特性も違うでしょうから、印刷でのシビアな色指定は相当難儀なものです。色によっては 4色カラー + 特色で印刷しないと無理と言われることもよくあります。

せっかく2つのカラースペース用のRGB値があるので、Adoe RGB と sRGB で上記の値を指定してみます。左から Adobe RGB（プロファイル埋込み）、sRGB（プロファイル埋込み）、Adobe RGB（プロファイルなし）、sRGB（プロファイルなし）です。
再現目標の色が同じでもカラースペースが違えばRGBの値が違ってしまうわけですが、最近のブラウザーは埋め込みプロファイルを解釈して色管理してくれるようです。左から3つ目のものはAdobeRGBのプロファイルがないので、ブラウザーが多分sRGBと見なしているのでしょう。

RGBデータからCMYK変換して印刷というのもよくありそうです。再現域が違うので色落ちはやむを得ないのですが、RGBの素性がわからない場合はさらに問題です。
左から

Adobe RGB→ CMYK（Japan Color 2001 Coated ）→ （Web表示用に）sRGB（プロファイル埋込み）
sRGB→ CMYK → sRGB
Adobe RGB を sRGB の色空間で開く→ CMYK →s RGB
（Adobe RGBの色空間で作られたデータなのに、プロファイルがなかったのでsRGBのデータと判断してCMYK変換をしてしまったという想定）
sRGB を Adobe RGB の色空間で開く→ CMYK →s RGB
（sRGBの色空間で作られたデータなのに、プロファイルがなかったのでAdobe RGBのデータと判断してCMYK変換をしてしまったという想定）
枠はsRGB（プロファイル埋込み）

左の二つは変換を繰り返しても色のリレーがそこそこうまく行ってますが、色空間の選択を間違えた右二つは色化けしてしまいました。CMYK変換目的で由来のわからないRGBを開く時は、作業用色空間の選択に注意が必要です。

このデジタルカラーガイドは、iPhone / iPad / Andoroid それぞれのアプリがあります。
iOS も Andoroid OS も現時点でカラー管理機能がないので、これだけで印刷用の色指定するのは不安が残りますが、DICのカラーガイド1〜6巻、日本の色、フランスの色、中国の色と9巻分の色情報が検索できるので、デザインの参考や打合せの資料としてはかなり役立ちそうです。

追記を閉じる

2013.11.16

秋分

十六夜

十五夜満月に遅れるところから「ためらう」「躊躇する」の意
日々いさよってますね。

Adobe Illustrator_CC の文字タッチツールは、効果メニューではなく、これまで一字づつ選択しては大きさやベースラインシフト、カーニング、回転等を設定していたのをマウスドラッグで直感的に動かせる機能です。従って、旧バージョン形式にもテキストが分割されず保存できるそうです。
→「なんと下位互換性があるIllustrator CCの文字タッチツール」
個人的には下位互換なくても文字に個々にシアー（斜ける）かけれたら嬉しいのですが・・・

さて、全然風流でないポストカードイメージですが、これを「金 + 黒」の2色刷で数枚作ろうとすると、どうも手軽な方法がなさそうです。

Read More 印刷業者にお願いするのであれば、スミベタ／文字白抜き + 金（または金箔押） もう少し凝れば、質感のいい黒紙にシルク又はUV印刷で白ノセ + 金（または金箔押）などが考えられますが、これを家庭用のプリンターベースでやろうとすると、金を印刷する方法が思いつきません。 かつて、アルプス電気からMD5000/5500というプリンターで金・銀印刷が可能でしたが、製造中止になってしまいました。知人でこのプリンター所有者もいらっしゃるのですが、接続がSCSI（スカジー）だったりPC側がドライバーに対応しなくなったりと古い環境を維持できなくなったら終わりだそうです。消耗品の問題もあります。 ただ、やはり需要はいくらかあるようで、使わなくなったプリンターの回収・再販売事業が行われているようです。 名刺・はがき専用で「CARD MATEシリーズ」のようなプリンターもありますが、やはり業務用でしょうね。 16色くらいあるインクリボンを交換すれば金／銀箔のような印刷が可能です。 市販のインクジェット／レーザープリンタで金・銀（あるいは他の特色も）対応できるものがあればと思いますが、今のところないものねだりです。金・銀のインクジェット用紙はありますが、白文字は無理です。 白トナーは、OKI のマイクロラインシリーズから対応機が発売されました。 金／銀だけ考えれば、スタンピングリーフ（アイロンプリント）も手作りっぽい面白さがあります。PCがまだ普及していない頃、Too の前身「いずみや」で小型アイロンとテープシートをセット販売してました。 モノクロコピーのトナー部分にだけ色テープを熱で圧着させることができるので、プリンターのない時代には立派なデザインカンプツールでした。 今は、吉田金糸店さんでシートが販売されています。 レーザープリンターかコピーで原稿を用意します トナー部分に金が定着される 黒トナーの原稿を用意してアイロンで金のテープを転写すればいいのですが、今回のイメージだとトナーで金と黒の部分を分離できません。 結局、金タック紙をカッティングして貼るくらいしか方法がなさそうです。

印刷業者にお願いするのであれば、スミベタ／文字白抜き + 金（または金箔押）
もう少し凝れば、質感のいい黒紙にシルク又はUV印刷で白ノセ + 金（または金箔押）などが考えられますが、これを家庭用のプリンターベースでやろうとすると、金を印刷する方法が思いつきません。

かつて、アルプス電気からMD5000/5500というプリンターで金・銀印刷が可能でしたが、製造中止になってしまいました。知人でこのプリンター所有者もいらっしゃるのですが、接続がSCSI（スカジー）だったりPC側がドライバーに対応しなくなったりと古い環境を維持できなくなったら終わりだそうです。消耗品の問題もあります。
　ただ、やはり需要はいくらかあるようで、使わなくなったプリンターの回収・再販売事業が行われているようです。

名刺・はがき専用で「CARD MATEシリーズ」のようなプリンターもありますが、やはり業務用でしょうね。
16色くらいあるインクリボンを交換すれば金／銀箔のような印刷が可能です。

市販のインクジェット／レーザープリンタで金・銀（あるいは他の特色も）対応できるものがあればと思いますが、今のところないものねだりです。金・銀のインクジェット用紙はありますが、白文字は無理です。
　白トナーは、OKI のマイクロラインシリーズから対応機が発売されました。

金／銀だけ考えれば、スタンピングリーフ（アイロンプリント）も手作りっぽい面白さがあります。PCがまだ普及していない頃、Too の前身「いずみや」で小型アイロンとテープシートをセット販売してました。
モノクロコピーのトナー部分にだけ色テープを熱で圧着させることができるので、プリンターのない時代には立派なデザインカンプツールでした。
　今は、吉田金糸店さんでシートが販売されています。

レーザープリンターかコピーで原稿を用意します

トナー部分に金が定着される

黒トナーの原稿を用意してアイロンで金のテープを転写すればいいのですが、今回のイメージだとトナーで金と黒の部分を分離できません。
結局、金タック紙をカッティングして貼るくらいしか方法がなさそうです。

追記を閉じる

2013.09.23

白露

韮蕾（にらのつぼみ）

韮つぼみ

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

韮つぼみ

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

Read More オクラの時よりももう少し単純化してみました。 見出しと文章の並び順は、direction 書式でなく、単にposition 書式と右フロートでそれぞれ位置指定することにして、縦組非対応のブラウザーで横組になっても不自然でない位置に調整。 /* 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; /*見出しが横組になっても重ならない位置 */ } Safari_6での表示 Firefox_24での表示 InternetExplore_10での表示 Opera_16での表示

オクラの時よりももう少し単純化してみました。
見出しと文章の並び順は、direction 書式でなく、単にposition 書式と右フロートでそれぞれ位置指定することにして、縦組非対応のブラウザーで横組になっても不自然でない位置に調整。

/* 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; /*見出しが横組になっても重ならない位置 */
}

Safari_6での表示

Firefox_24での表示

InternetExplore_10での表示

Opera_16での表示

追記を閉じる

2013.09.09

処暑

オクラ-縦書き

オクラ

これは単純に文字も含めた一枚の画像に保存してあるだけですが、縦書きのレイアウトは未だにあまり見かけません。
CSS3で縦書き書式 ”writing-mode” が採用されても、未対応ブラウザーもありますし、htmlベースで縦組は面倒というか結構、課題ありです。

秋葵「ＯＫＲＡ」

字源は原産地ガーナのnkramaに由来するらしいが、レモンのように外来語。 ---略 ---

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>「ＯＫＲＡ」</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; } 縦書き表示(1) 縦書き表示(2) 縦書き表示(3) 縦書きが表示できないブラウザーでも大枠のレイアウトが崩れないように写真を左にフロート、見出しと文章を包む 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%; } 秋葵「ＯＫＲＡ」 字源は原産地ガーナのnkramaに由来するらしいが、レモンのように外来語。 意外というか当然というか花言葉があって「恋によって身が細る」 要するに恋わずらいですね。 花の誕生日：八月十五日 GoogleChorome_30での表示 Firefox_24での表示 InternetExplore_10での表示 Opera_16での表示 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>「ＯＫＲＡ」</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;
}

縦書き表示(1)

縦書き表示(2)

縦書き表示(3)

縦書きが表示できないブラウザーでも大枠のレイアウトが崩れないように写真を左にフロート、見出しと文章を包む 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%;
}

秋葵「ＯＫＲＡ」

字源は原産地ガーナのnkramaに由来するらしいが、レモンのように外来語。
意外というか当然というか花言葉があって「恋によって身が細る」
要するに恋わずらいですね。
　花の誕生日：八月十五日

GoogleChorome_30での表示

Firefox_24での表示

InternetExplore_10での表示

Opera_16での表示

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 GoogleChorome_30での表示 Firefox_24での表示 InternetExplore_10での表示 Opera_16での表示 SVG非対応ブラウザーに考慮したら、やはり代替画像も用意してobject タグで表示させる方がよさそうです。 SVGの対応状況など、渡辺竜さんのRruverサイトのページを参考にさせていただきました。 PDF埋込み: Adobe Illustrator_CCからSVG保存したものをインライン埋込み