解説

SASSで文字の縦書き表現を行うための関数。
Compassにはcwriting-modeが定義されていないため代用として作成されている。
更新日:2017年3月13日

使用方法

使用方法


@include writing-mode( 'rl' );

変換結果


-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;

実装サンプル

パラメタ

$direction(文字列)
“rl” … 右寄せ
“lr” … 左寄せ

戻り値

なし。

コード

writing-mode代用関数


/*----------------------------------------------------------------------------------------------------------
writing-mode代用関数
	説明:
		Compassにはcwriting-modeが定義されていない。
		そのための、代用Mixinとなる。
		
	引数:
		$direction		...	rl(右寄せ)
							lr(左寄せ)
----------------------------------------------------------------------------------------------------------*/
@mixin writing-mode( $direction )
{ 
	-ms-writing-mode: tb- + $direction;            		/* IE用 */
	-webkit-writing-mode: vertical- + $direction;  		/* chrome用 */
	-moz-writing-mode: vertical- + $direction;       	/* Firefox用 */
	-o-writing-mode: vertical- + $direction;       		/* opera用 */
	writing-mode: vertical- + $direction;				/* その他 */
}

必須要素

情報
  • Compassを用いること。

注意事項

なし。

更新履歴

2017/03/11 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.