CSS Text Module Level 3 Exmple

Transforming Text

text-transform property

none

srcset属性よりもpicture要素のほうが、冗長なんだけどわかりすいところがいい。imageset要素でimg要素を内包して、img要素の属性にデバイスピクセル比とかviewportサイズとかを指定できるようにしてくれないかなあ。 #html

capitalize

srcset属性よりもpicture要素のほうが、冗長なんだけどわかりすいところがいい。imageset要素でimg要素を内包して、img要素の属性にデバイスピクセル比とかviewportサイズとかを指定できるようにしてくれないかなあ。 #html

uppercase

srcset属性よりもpicture要素のほうが、冗長なんだけどわかりすいところがいい。imageset要素でimg要素を内包して、img要素の属性にデバイスピクセル比とかviewportサイズとかを指定できるようにしてくれないかなあ。 #html

lowercase

srcset属性よりもpicture要素のほうが、冗長なんだけどわかりすいところがいい。imageset要素でimg要素を内包して、img要素の属性にデバイスピクセル比とかviewportサイズとかを指定できるようにしてくれないかなあ。 #html

full-width

srcset属性よりもpicture要素のほうが、冗長なんだけどわかりすいところがいい。imageset要素でimg要素を内包して、img要素の属性にデバイスピクセル比とかviewportサイズとかを指定できるようにしてくれないかなあ。 #html

CSS ShapesのWD仕様をもとに実装具合を検証中。今までの矩形ボックス配置にくらべて格段にビジュアル表現ができるようになりつつあるね。 #css http://makotonakaguchi.github.io/css_shapes/

CSS Text Module Level 3がLast Callになってる。美しくかつ気持ちの良い文字組に少しずつ近づいているのはありがたいことだ。どうせなら初期値でやってもらいたいくらいだ。

今まで作ってたHTMLを Google Web Designer で開こうと思ったら、エラーが出る。調べてみたら、このツールで作成したよっていうメタ情報がコードにあった。ドリとかBracketsとかを使ってるかたはmeta要素にコードを追加するといいよ。

White Space and Wrapping: white-space property

normal

CSS ShapesのWD仕様をもとに実装具合を検証中。今までの矩形ボックス配置にくらべて格段にビジュアル表現ができるようになりつつあるね。 #css http://makotonakaguchi.github.io/css_shapes/

pre

CSS ShapesのWD仕様をもとに実装具合を検証中。今までの矩形ボックス配置にくらべて格段にビジュアル表現ができるようになりつつあるね。 #css http://makotonakaguchi.github.io/css_shapes/

nowrap

CSS ShapesのWD仕様をもとに実装具合を検証中。今までの矩形ボックス配置にくらべて格段にビジュアル表現ができるようになりつつあるね。 #css http://makotonakaguchi.github.io/css_shapes/

pre-wrap

CSS ShapesのWD仕様をもとに実装具合を検証中。今までの矩形ボックス配置にくらべて格段にビジュアル表現ができるようになりつつあるね。 #css http://makotonakaguchi.github.io/css_shapes/

pre-line

CSS ShapesのWD仕様をもとに実装具合を検証中。今までの矩形ボックス配置にくらべて格段にビジュアル表現ができるようになりつつあるね。 #css http://makotonakaguchi.github.io/css_shapes/

Line Breaking and Word Boundaries

line-break property

auto

CSS Text Module Level 3がLast Callになってる。美しくかつ気持ちの良い文字組に少しずつ近づいているのはありがたいことだ。どうせなら初期値でやってもらいたいくらいだ。

loose

CSS Text Module Level 3がLast Callになってる。美しくかつ気持ちの良い文字組に少しずつ近づいているのはありがたいことだ。どうせなら初期値でやってもらいたいくらいだ。

normal

CSS Text Module Level 3がLast Callになってる。美しくかつ気持ちの良い文字組に少しずつ近づいているのはありがたいことだ。どうせなら初期値でやってもらいたいくらいだ。

strict

CSS Text Module Level 3がLast Callになってる。美しくかつ気持ちの良い文字組に少しずつ近づいているのはありがたいことだ。どうせなら初期値でやってもらいたいくらいだ。

word-break prvoperty

normal

今まで作ってたHTMLをGoogle Web Designer で開こうと思ったら、エラーが出る。調べてみたら、このツールで作成したよっていうメタ情報がコードにあった。ドリとかBracketsとかを使ってるかたはmeta要素にコードを追加するといいよ。

keep-all

今まで作ってたHTMLをGoogle Web Designer で開こうと思ったら、エラーが出る。調べてみたら、このツールで作成したよっていうメタ情報がコードにあった。ドリとかBracketsとかを使ってるかたはmeta要素にコードを追加するといいよ。

break-all

今まで作ってたHTMLをGoogle Web Designer で開こうと思ったら、エラーが出る。調べてみたら、このツールで作成したよっていうメタ情報がコードにあった。ドリとかBracketsとかを使ってるかたはmeta要素にコードを追加するといいよ。

Breaking Within Words

hyphens property

manual

In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an unconditional hyphen. Unicode Standard Annex #14 describes the role of soft hyphens in Unicode line breaking. [UAX14] In HTML, ­ represents the soft hyphen character which suggests a hyphenation opportunity.

auto

Words may be broken at appropriate hyphenation points either as determined by hyphenation characters inside the word or as determined automatically by a language-appropriate hyphenation resource. Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation opportunities within the word.

overflow-wrap / word-wrap property

break-word

In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an unconditional hyphen. Unicode Standard Annex #14 describes the role of soft hyphens in Unicode line breaking. [UAX14] In HTML, ­ represents the soft hyphen character which suggests a hyphenation opportunity.

Alignment and Justification

text-align property

start

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

end

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

left

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

right

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

center

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

justify

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

match-parent

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

start end

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

text-align-last property

auto

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

start

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

end

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

left

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

right

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

center

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

justify

A block of text is a stack of line boxes. This property specifies how the inline-level boxes within each line box align with respect to the start and end sides of the line box. Alignment is not with respect to the viewport or containing block.

text-justify property

auto

Webで容易に複雑なレイアウトがデザインできるようになるのはまだ先で今それを実現するにはJavaScriptや一枚ものの画像にする必要がある。今でもできるじゃん。って思えるかもしれないがこれでは情報へのアクセスと伝えるインターフェースという点で不十分。

inter-word

Webで容易に複雑なレイアウトがデザインできるようになるのはまだ先で今それを実現するにはJavaScriptや一枚ものの画像にする必要がある。今でもできるじゃん。って思えるかもしれないがこれでは情報へのアクセスと伝えるインターフェースという点で不十分。

distribute

Webで容易に複雑なレイアウトがデザインできるようになるのはまだ先で今それを実現するにはJavaScriptや一枚ものの画像にする必要がある。今でもできるじゃん。って思えるかもしれないがこれでは情報へのアクセスと伝えるインターフェースという点で不十分。

Spacing

word-spacing property

normal

Additional spacing is applied to each word separator left in the text after the white space processing rules have been applied, and should be applied half on each side of the character unless otherwise dictated by typographic tradition.

⟨length⟩

Additional spacing is applied to each word separator left in the text after the white space processing rules have been applied, and should be applied half on each side of the character unless otherwise dictated by typographic tradition.

⟨percentage⟩

Additional spacing is applied to each word separator left in the text after the white space processing rules have been applied, and should be applied half on each side of the character unless otherwise dictated by typographic tradition.

letter-spacing property

normal

CSS Shapesのカスタム形状ボックスに合わせて線と塗りを適用できればいいなあ。と思っているが、それはbackgroundやimg、SVGで表現してくれってことだな。矩形でない形状を浮動化できるようにすること、Regionsとともに複雑なレイアウトを実現させることが目的か。

⟨length⟩

CSS Shapesのカスタム形状ボックスに合わせて線と塗りを適用できればいいなあ。と思っているが、それはbackgroundやimg、SVGで表現してくれってことだな。矩形でない形状を浮動化できるようにすること、Regionsとともに複雑なレイアウトを実現させることが目的か。

Edge Effects

text-indent property

⟨length⟩

Additional spacing is applied to each word separator left in the text after the white space processing rules have been applied, and should be applied half on each side of the character unless otherwise dictated by typographic tradition.

⟨percentage⟩

Additional spacing is applied to each word separator left in the text after the white space processing rules have been applied, and should be applied half on each side of the character unless otherwise dictated by typographic tradition.

each-line

Additional spacing is applied to each word separator left in the text after the white space processing rules have been applied, and should be applied half on each side of the character unless otherwise dictated by typographic tradition.
Indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break.

hanging

Inverts which lines are affected.
Additional spacing is applied to each word separator left in the text after the white space processing rules have been applied, and should be applied half on each side of the character unless otherwise dictated by typographic tradition.

hanging-punctuation property

first

EdgeReflowさっき使ってみた。サイトを企画しているときに説明するためのツールとしてはいいかも。 スタイルのこまかいところは調整する必要があるけど、文字と画像を一つずつ挿入しただけで、レイアウトのスタイル関係のものすごい長いIDの宣言とかとか。いずれはドリに統合されるのか、それとも新しいオーサリングになるのか。
microdataを学習中。情報を理解しやすく確認するだけでなく、使えるところに興味あり。googleでの資料を主に参考。その他のサイトは情報が少ないが、その分早く深いところまで探ることができる。実装してなんぼなんだけど、リッチスニペット以外の用途での利用が乏しい。
microdataでリッチスニペットを実装しようかと思ったが、ちゃんと実装できているか検証して、かつ確実に表示したいのなら申請しないといけないみたい。スパムの問題もあるし、まだ普及段階じゃないからだろうな。

force-end

EdgeReflowさっき使ってみた。サイトを企画しているときに説明するためのツールとしてはいいかも。 スタイルのこまかいところは調整する必要があるけど、文字と画像を一つずつ挿入しただけで、レイアウトのスタイル関係のものすごい長いIDの宣言とかとか。いずれはドリに統合されるのか、それとも新しいオーサリングになるのか。
microdataを学習中。情報を理解しやすく確認するだけでなく、使えるところに興味あり。googleでの資料を主に参考。その他のサイトは情報が少ないが、その分早く深いところまで探ることができる。実装してなんぼなんだけど、リッチスニペット以外の用途での利用が乏しい。
microdataでリッチスニペットを実装しようかと思ったが、ちゃんと実装できているか検証して、かつ確実に表示したいのなら申請しないといけないみたい。スパムの問題もあるし、まだ普及段階じゃないからだろうな。

allow-end

EdgeReflowさっき使ってみた。サイトを企画しているときに説明するためのツールとしてはいいかも。 スタイルのこまかいところは調整する必要があるけど、文字と画像を一つずつ挿入しただけで、レイアウトのスタイル関係のものすごい長いIDの宣言とかとか。いずれはドリに統合されるのか、それとも新しいオーサリングになるのか。
microdataを学習中。情報を理解しやすく確認するだけでなく、使えるところに興味あり。googleでの資料を主に参考。その他のサイトは情報が少ないが、その分早く深いところまで探ることができる。実装してなんぼなんだけど、リッチスニペット以外の用途での利用が乏しい。
microdataでリッチスニペットを実装しようかと思ったが、ちゃんと実装できているか検証して、かつ確実に表示したいのなら申請しないといけないみたい。スパムの問題もあるし、まだ普及段階じゃないからだろうな。

last

EdgeReflowさっき使ってみた。サイトを企画しているときに説明するためのツールとしてはいいかも。 スタイルのこまかいところは調整する必要があるけど、文字と画像を一つずつ挿入しただけで、レイアウトのスタイル関係のものすごい長いIDの宣言とかとか。いずれはドリに統合されるのか、それとも新しいオーサリングになるのか。
microdataを学習中。情報を理解しやすく確認するだけでなく、使えるところに興味あり。googleでの資料を主に参考。その他のサイトは情報が少ないが、その分早く深いところまで探ることができる。実装してなんぼなんだけど、リッチスニペット以外の用途での利用が乏しい。
microdataでリッチスニペットを実装しようかと思ったが、ちゃんと実装できているか検証して、かつ確実に表示したいのなら申請しないといけないみたい。スパムの問題もあるし、まだ普及段階じゃないからだろうな。

first force-end last

EdgeReflowさっき使ってみた。サイトを企画しているときに説明するためのツールとしてはいいかも。 スタイルのこまかいところは調整する必要があるけど、文字と画像を一つずつ挿入しただけで、レイアウトのスタイル関係のものすごい長いIDの宣言とかとか。いずれはドリに統合されるのか、それとも新しいオーサリングになるのか。
microdataを学習中。情報を理解しやすく確認するだけでなく、使えるところに興味あり。googleでの資料を主に参考。その他のサイトは情報が少ないが、その分早く深いところまで探ることができる。実装してなんぼなんだけど、リッチスニペット以外の用途での利用が乏しい。
microdataでリッチスニペットを実装しようかと思ったが、ちゃんと実装できているか検証して、かつ確実に表示したいのなら申請しないといけないみたい。スパムの問題もあるし、まだ普及段階じゃないからだろうな。