ぱらむ・すきっちぇ

韮蕾（にらのつぼみ）

韮つぼみ

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

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

Safari_6での表示

Firefox_24での表示

InternetExplore_10での表示

Opera_16での表示

オクラの時よりももう少し単純化してみました。
見出しと文章の並び順は、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; /*見出しが横組になっても重ならない位置 */
}

Safari_6での表示

Firefox_24での表示

InternetExplore_10での表示

Opera_16での表示

追記を閉じる

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>「ＯＫＲＡ」</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で縦書-右から左*/
}

1. まず、3要素に縦組と文字方向を右から左の指定で、文字は縦組になるが、画像-見出し-文章の3要素は上から下に表示される。
2. 3要素を包んでいるdiv#okra-tate に表示方向：右→左を指定
   起点が右からになるが、文字が下から上向きになってしまう
3. 見出しと文章に表示方向上から下を追加

#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で縦書-右から左*/
}

1. まず、3要素に縦組と文字方向を右から左の指定で、文字は縦組になるが、画像-見出し-文章の3要素は上から下に表示される。
2. 3要素を包んでいるdiv#okra-tate に表示方向：右→左を指定
   起点が右からになるが、文字が下から上向きになってしまう
3. 見出しと文章に表示方向上から下を追加

#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保存したものをインライン埋込み