1. 序論
◎非規範的この仕様の`~level 1$ は、 要素の`浮動~区画$の幾何を制御するための~propを定義した。 この~levelは： ◎ Level 1 of this specification defined properties to control the geometry of an element’s float area. This level＼
- `排他体$に図形をどう適用するかを定義する。 ◎ defines how shapes apply to exclusions.＼
- 図形を要素の`内容~区画$に適用するための `shape-inside$p ~propを含む。 ◎ It also includes a shape-inside property for applying a shape to an element’s content area.＼
- これらすべての適用~用に，図形を指定する新たな仕方を定義する。 ◎ Finally, it defines new ways of specifying shapes for all of these applications.
1.1. 値 定義
【 この節の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】
2. 各種用語
- `排他~区画@ ◎ exclusion area
- 行内~flow内容を`排他~box$の周りに排他するために利用される区画。 `排他~区画$は、 `排他~box$用には`~border~box$に等価になる。 この仕様の `shape-outside$p ~propを利用すれば、 任意な矩形でない`排他~区画$を定義できる。 `shape-inside$p ~propも`排他~区画$を定義するが、 この事例では、 それは，図形の外側にある区画になる — 行内~内容がそこを避けるような。 ◎ The area used for excluding inline flow content around an exclusion box. The exclusion area is equivalent to the border box for an exclusion box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular exclusion areas. The shape-inside property also defines an exclusion area, but in this case it is the area outside the shape that inline content avoids.
- `浮動~区画@ ◎ float area
- 内容が`浮動体$を回込むために利用される区画。 既定では，浮動-区画は`浮動体$の`~margin~box$になる。 この仕様の `shape-outside$p ~propを利用すれば、 任意な矩形でない浮動-区画を定義できる。 ◎ The area used for wrapping content around a float element. By default, the float area is the float element’s margin box. This specification’s shape-outside property can be used to define arbitrary, non-rectangular float areas.
- `内容~区画@ ◎ content area
- 通常は、 ~boxの行内~flow内容の~layout用に利用される区画。 ◎ The content area is normally used for layout of the inline flow content of a box.
3. 図形
図形は、 任意な幾何的な輪郭を定義する — 行内~内容は，その周りに~flowする。 `shape-outside$p ~propは、［ `浮動体$用には`浮動~区画$／ `排他体$用には`排他~区画$ ］を定義する。 ◎ Shapes define arbitrary geometric contours around which inline content flows. The shape-outside property defines the float area for a float, and the exclusion area for an exclusion.
4. 基本~図形
`~level 1$ の `§ 基本~図形＠~CSSSHAPES#basic-shape-functions$ をここに追加する。 ◎ Add the final level 1 section.
4.1. ~supportされる図形
`~level 1$ の `§ ~supportされる図形＠~CSSSHAPES#supported-basic-shapes$ をここに追加する。 ◎ Add the final level 1 sections.
4.1.1. `shape^f 関数
`~level 1$ の § `shape^f 関数 をここに追加する。 ◎ Add the final level 1 section.
5. ~SVG図形の参照-法
~SVGの［ `基本~図形＠~SVGshapes$／`~path＠~SVGpaths$ ］は、 `url^f 構文を利用して参照できる。 ◎ An SVG shape can be referenced using the url() syntax. The shape can be any of the SVG basic shapes or a path element.
【 ここには画像が~mark-upされているが、 ~~参照先は存在しない。 】
~SVG図形を参照している結果 ◎ results of referencing SVG shapes
<style>
div {
height: 400px;
width: 400px;
}
.in-a-circle {
shape-outside: url(#circle_shape);
}
.in-a-path {
shape-outside: url(#path-shape);
}
</style>
<svg ...>
<circle id="circle_shape" cx="50%" cy="50%" r="50%" />
<path id="path-shape" d="M 100 100 L 300 100 L 200 300 z" />
</svg>
<div class="around-a-circle">...</div>
<div class="around-a-path">...</div>
6. 画像による図形
`~level 1$ の `§ 画像による図形＠~CSSSHAPES#shapes-from-image$ をここに追加する。 ◎ Add the final level 1 section.
要素の描画された内容に基づいて図形を定義することが， `示唆された＠https://www.w3.org/Bugs/Public/show_bug.cgi?id=16716$。 これは、 ~securityの含意も伴い得る。 ◎ One suggestion is to define a shape based on an element’s rendered content. This could have security implications.
`image^f 関数に［ 利用する関連な画素たちを決定する何か ］を追加することも， `示唆された＠http://lists.w3.org/Archives/Public/www-style/2014Mar/0120.html$ （図形を［ 定義するため, 表示するため ］両者に）。 ◎ Another suggestion is to add something to an image() function that determines the relevant pixels to use (both for defining a shape and for display).
7. 外部~図形の~fetch法
`図形~用の外部~資源を~fetchする@ ~algoは、 所与の ( %宣言 ) に対し：
- ~Assert： %宣言 は、［ ~SVGまたは画像 ］による図形を参照する`~CSS宣言$である
- %応答の処理n ~LET 所与の ( `応答$ %応答, ［ ~NULL／`失敗^i／~byte~stream ］ %~byte~stream ) に対し，次を走らす手続き ⇒ ~IF［ %~byte~stream は~byte~streamである 【かつ %~byte~stream は妥当な図形を与えている】 ］ ⇒ 当の図形を受容している適切な~propに %~byte~stream から得られた図形を適用する
- `~style資源を~fetchする$( ↓ ) ⇒＃ 【 %宣言 内に指定された】 `url$t, %宣言, `image^l, `cors^l, %応答の処理n
注記： 図形の効果は，当の文書により検出されるので、 図形【用の外部~資源を~fetchするとき】には~CORS~modeが要求される。 ◎ Note: shapes require CORS mode as their effect is detected by the document.
8. ~box値による図形
`~level 1$ の `§ ~box値による図形＠~CSSSHAPES#shapes-from-box-values$ をここに追加する。 ◎ Add the final level 1 section.
9. 図形の宣言-法
図形は、 `shape-outside$p ~propで宣言できる — それには、 `shape-margin$p ~propによる改変もアリになる。 ［ `shape-outside$p, `shape-margin$p ］~propにより定義される図形は、［ `浮動体$の`浮動~区画$, `排他体$の`排他~区画$ ］の幾何を変更する。 ◎ A shape can be declared with the shape-outside property, with possible modifications from the shape-margin property. The shape defined by the shape-outside and shape-margin properties changes the geometry of a float element’s float area and an exclusion element’s exclusion area.
図形は、 `shape-inside$p ~propで宣言できる — それには、 `shape-padding$p ~propによる改変もアリになる。 ［ `shape-inside$p, `shape-padding$p ］~propにより定義される図形は、 当の要素の`回込み文脈$に供与する`排他~区画$ ］を定義する。 `shape-inside$p ~propは、 すべての塊~levelの要素に適用される。 ◎ A shape can be declared with the shape-inside property, with possible modifications from the shape-padding property. The shape defined by the shape-inside and shape-padding properties defines an exclusion area that contributes to the element’s wrapping context. The shape-inside property applies to all block-level elements.
`red^v な~boxは、 `排他体$の内容~boxを図示する, それは［ 改変されない／ 通常の~CSS位置決め（ここでは絶対~位置決め）の~subjectになる ］。 ◎ The red box illustrates an exclusion element’s content box, which is unmodified and subject to normal CSS positioning (here absolute positioning).
<style type="text/css">
.exclusion {
wrap-flow: both;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
shape-outside: circle(50% at 50% 50%);
border: 1px solid red;
}
</style>
<div style=”position: relative;”>
<div class=”exclusion”></div>
Lorem ipsum dolor sit amet...
</div>
`circle$f 図形と~box~modelを描画する例。 ◎ Example rendering of circle shape and box model.
9.1. `shape-outside^p ~prop
`~level 1$ の `§ 浮動~区画の図形＠~CSSSHAPES#shape-outside-property$ をここに追加する — 次に挙げる変更も伴わせて ⇒ `shape-outside$p は塊~levelの要素にも適用され、 要素が`排他体$である場合に効果がある。 ◎ Add the final level 1 section with the change that shape-outside applies to block-level elements and has an effect if the element is an exclusion.
9.2. `shape-inside^p ~prop
`shape-inside$p ~propは、 要素の`回込み文脈$に 1 個以上の`排他~区画$を追加する。 これは、 `内容~区画$を成す通常の矩形な図形を，場合によっては矩形でない回込み区画に改変する。 `排他~区画$は、 当の要素の`内容~区画$から当の図形を減算することにより定義される。 図形を成す［ 要素の`内容~区画$の外側にある部分 ］には効果は無い 【言い換えれば、実質的な図形は，当の図形の外側と内容~区画との交差域になる】。 ◎ The shape-inside property adds one or more exclusion areas to the element’s wrapping context. This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion areas are defined by subtracting the shape from the element’s content area. Any part of the shape outside the element’s content area has no effect.
各種~値の意味は： ◎ The values of this property have the following meanings:
- `auto@v
- 図形は、 当の要素の内容~boxに基づいて算出される。 ◎ The shape is computed based on the content box of the element.
- `outside-shape@v
- 図形は、［ `shape-outside$p, `shape-margin$p ］~propにより定義される図形に基づいて算出される。 ◎ The shape is computed based on the shape defined by the shape-outside and shape-margin properties.
- `basic-shape$t
- 図形は、 `basic-shape$t を成す いずれかの値に基づいて算出される ◎ The shape is computed based on the values of one of the <basic-shape> functions.
- `url$t
-
`url$t が何を参照するかに応じて：
- ~SVG図形~要素を参照する場合 ⇒ その要素が図形を定義する。
- 画像を参照する場合 ⇒ 図形は，指定された画像から抽出される~alpha~channelに基づいて算出される。
- 他の場合 ⇒ その効果は、 値 `auto$v が指定されたかのようになる。
- `display@v
- 図形は、 `CSS Round Display＠~CSSWG/css-round-display$cite にて述べられるとおりの表示を成す図形に基づいて算出される。 ◎ The shape is computed based on the shape of the display as described in css-round-display.
`shape-inside$p ~propは、 `浮動体$にも適用されるが， 適用されない要素もある — `display$p の算出d値に `table＠~CSSDISP#valdef-display-table$v を伴う要素など。 ◎ The shape-inside property applies to floats. ◎ The shape-inside property may not apply on some elements such as elements with a computed display value of table.
`shape-inside^p を［ 伴って／伴わずに ］~flowしている内容 ◎ Content flowing with and without a shape-inside
~overflowする内容は、［ `shape-inside$p, `shape-padding$p ］により追加された`排他~区画$（たち）を避ける （当の要素の`回込み文脈$内の他の`排他~区画$に加えて）。 言い換えれば、 ~overflowは，当の要素の矩形な限界域の外側で継続する。 ◎ Overflow content avoids the exclusion area(s) added by shape-inside and shape-padding (as well as any other exclusion areas in the element’s wrapping context). In other words, overflow continues outside the rectangular bounds of the element.
丸まった矩形と相互作用している~overflow ◎ Overflow interacting with rounded rect
楕円と相互作用している~overflow ◎ Overflow interacting with ellipse
灰色な~boxに代えて~overflowを示す~textを利用して、 上の図を改善する。 ◎ improve the illustration above, using text to show overflow instead of grey boxes.
`自動的~size$を伴う要素は、 `shape-inside^p が`確定的~size$を有する場合には （図形の定義~内に百分率は利用されてない）， 自身の`最大~size$を決定するときの拘束として当の図形を利用するベキである。 ◎ When a shape-inside has a definite size (no percentages used in the shape’s definition) an auto-sized element should use the shape as a constraint in determining its maximum size.
9.3. `shape-image-threshold^p ~prop
`~level 1$ の `§ 画像~内で図形を成す画素を選ぶ＠~CSSSHAPES#shape-image-threshold-property$ をここに追加する — 次に挙げる変更も伴わせて ⇒ `shape-image-threshol^p は［ `shape-inside$p, `shape-outside$p ］どちらにも適用される。 ◎ Add the final level 1 section with the change that it applies to both shape-inside and shape-outside.
9.4. `shape-image-source-type^p ~prop
画像~sourceから図形を得るために利用する値を決定するときに［ ~alpha／輝度 ］による閾値を追加するべきか？ 【~alphaによる閾値はすでに`~level 1$ にある。】 これは、 `shape-image-threshold$p ~prop用の単なる~keyword値にもなり得る。 何であれ，~mask~sourceからの［ ~alpha／輝度 ］閾値と互換になるべきである【`参照＠~MASKING1#MaskValues$】。 ◎ Should we add an alpha/luminance switch to determine which values we use from the shape-image source? This could just be a keyword on the shape-image-threshold property. Whatever we go with should be compatible with the alpha/luminance switch from mask sources.
9.5. `shape-margin^p ~prop
`~level 1$ の `§ 図形の拡幅-法＠~CSSSHAPES#shape-margin-property$ をここに追加する — 次に挙げる変更も伴わせて ⇒ `shape-margin$p は`排他体$にも適用される。 ◎ Add the final level 1 section with the change that it applies to exclusions.
9.6. `shape-padding^p ~prop
`shape-padding$p ~propは、 `shape-inside^p に~paddingを追加する。 これは、 `shape-inside^p から【内方へ】指定された距離~以上にある点からなる新たな図形を定義する。 この~propは、 正な値に限り，とり得る。 ◎ The shape-padding property adds padding to a shape-inside. This defines a new shape where every point is the specified distance from the shape-inside. This property takes on positive values only.
- `length-percentage [0,∞]$t
- 当の図形の~paddingを指定された値に設定する。 ◎ Sets the padding of the shape to the specified value.
`shape-padding^p により~offsetされる例 ◎ Example of a shape-padding offset
注記： `shape-padding$p ~propが影響するのは， それが適用される要素の内側にある内容の~layoutに限られる一方で、 `shape-margin$p ~propが影響するのは， 当の要素の外側にある内容の~layoutに限られる。 ◎ Note: The shape-padding property only affects layout of content inside the element it applies to while the shape-margin property only affects layout of content outside the element.
~privacyの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new privacy considerations have been reported on this specification.
~securityの考慮点
この仕様に対し報告された，新たな~privacyの考慮点は、無い。 ◎ No new security considerations have been reported on this specification.