Skip to content

Commit a1557b0

Browse files
author
Jihye Hong
committed
[css-round-display] Get rid of polar value in position property and add a description about enbling polar positioning when polar-distance is given non-auto value
1 parent ae8ff1f commit a1557b0

2 files changed

Lines changed: 212 additions & 263 deletions

File tree

‎css-round-display/Overview.bs‎

Lines changed: 110 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -281,29 +281,18 @@ Polar coordinate system is a two-dimensional coordinate system that describes th
281281

282282
This section introduces polar positioning to support layout of elements in the polar coordinate system where the position of an element is determined by a distance from the center point within the containing element and an angle from the Y-axis.
283283

284-
We add '<code>polar</code>' to the value of the 'position' property to support the polar coordinates of an element itself. The 'polar-angle' and 'polar-distance' properties specify the position of an element.
284+
The 'polar-angle' and 'polar-distance' properties specify the position of an element in polar coordinates.
285+
When 'polar-distance' isn't auto, it means an element will be positioned by polar positioning not by the conventional two-dimensional positioning.
286+
If one of the properties such as left, top, right, bottom isn't auto,
287+
properties related to polar positioning are ignored.
288+
285289
</p>
286290
<p class="note">
287291
Note: In polar coordinate system, a pole is the reference point and points are described as been a certain distance from it, as also a certain angle from the polar axis. In mathematical theory, the polar axis is commonly defined as the positive direction of the x-axis, but we consider the polar axis as the positive direction of the y-axis position as other CSS specifications usually do. Therefore, when the 'polar-angle' value of an element is 0, the element is positioned on the y-axis. If the angle value of an element increases in the positive direction from 0, the element moves clockwise. The method to determine a direction using 'polar-angle' works the same way in [[CSS-VALUES]], <<angle>> value.
288292
</p>
289-
<h3 id="position-property">The 'position' property</h3>
290-
When the 'position' property on an element is set to '<code>polar</code>', the element could be affected in polar coordinate system.
291-
<pre class='propdef'>
292-
Name: position
293-
Applies to: all elements except table-column-group and table-column
294-
Value: static | relative | absolute | sticky | fixed | <code>polar</code>
295-
Initial: static
296-
Inherited: no
297-
Percentages: N/A
298-
Media: visual
299-
Computed value: specified value
300-
Animatable: no
301-
</pre>
302-
<p class="note">
303-
Note: The center point of the containing block of an element indicates the origin of polar coordinate when the value of position property of the element is '<code>polar</code>'.
304-
</p>
293+
305294
<p>
306-
In conventional coordinate system used in the web, the origin is positioned in the upper left corner of a containing block. In comparison, the origin of polar coordinates is the center point of a containing block. Therefore different methods are required to deploy and transform elements, or set margin/padding values when using polar coordinates.
295+
In conventional coordinate system used in the web, the origin is positioned in the upper left corner of a containing block. In comparison, the default origin of polar coordinates is the center point of a containing block. Therefore different methods are required to deploy and transform elements, or set margin/padding values when using polar coordinates.
307296

308297
An example as below shows the difference between the conventional coordinates and the polar coordinates when positioning elements.
309298
</p>
@@ -320,20 +309,20 @@ Figure 6A might be the result of
320309
Figure 6B might be the result of
321310
<pre>
322311
&lt;body>
323-
&lt;div style="position: polar; width: 100px; height: 100px; background-color: blue;">&lt;/div>
324-
&lt;div style="position: polar; width: 50px; height: 50px; background-color: green;">&lt;/div>
312+
&lt;div style="position: absolute; polar-distance: 0%; width: 100px; height: 100px; background-color: blue;">&lt;/div>
313+
&lt;div style="position: absolute; polar-distance: 0%; width: 50px; height: 50px; background-color: green;">&lt;/div>
325314
&lt;/body>
326315
</pre>
327316

328317
<br />
329318
<div style="width: 700px; text-align:center">
330319
<div style="float: left; width: 350px;">
331320
<img alt="An image aligning two elements to containing block in the conventional coordinate system" style="width: 300px" src="images/polar_position_a.png">
332-
<p>(A) With 'position: <code>absolute</code>'</p>
321+
<p>(A) With 'position: <code>absolute</code>;'</p>
333322
</div>
334323
<div style="float: left; width: 350px; ">
335324
<img alt="An image aligning two elements to containing block in the polar coordinate system" style="width: 300px" src="images/polar_position_b.png">
336-
<p>(B) With 'position: <code>polar</code>'</p>
325+
<p>(B) With 'position: <code>absolute</code>; polar-distance: 0%;'</p>
337326
</div>
338327
</div>
339328
<div style="width: 700px">
@@ -342,103 +331,6 @@ Figure 6B might be the result of
342331

343332
</div>
344333

345-
<h3 id="polar-origin-property">The 'polar-origin' property</h3>
346-
<p>
347-
The 'polar-origin' property sets a point of origin for polar coordinate system.
348-
<br><br>
349-
Not only elements are positioned within the containing block according to the origin but also properties such as display, margin, and padding are affected by the origin. In conventional coordinate system, the origin of coordinate system implicitly set to upper left corner of the containing block. But in polar coordinates, it is general to specify the point of origin as the center point of the containing block. Also, there would be a situation that the other point in the containing block area need to be the origin.
350-
</p>
351-
<pre class='propdef'>
352-
Name: polar-origin
353-
Applies to: all elements
354-
Value: <<position>>
355-
Initial: 50% 50%
356-
Media: visual
357-
Inherited: no
358-
Percentages: Refer to the size of containing block
359-
Animatable: as <a href="http://www.w3.org/TR/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>
360-
</pre>
361-
<p>
362-
Where
363-
<dl>
364-
<b>&lt;position&gt;</b> = [
365-
<br>
366-
&nbsp;[ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
367-
<br>
368-
|
369-
<br>
370-
&nbsp;&nbsp;[ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
371-
<br>
372-
&nbsp;&nbsp;[ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
373-
<br>
374-
|
375-
<br>
376-
&nbsp;&nbsp;[ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
377-
<br>
378-
&nbsp;&nbsp;[ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
379-
<br>
380-
]
381-
</dl>
382-
383-
Values are defined as follows:
384-
385-
<dl>
386-
<dt><var>&lt;percentage&gt;</var></dt>
387-
<dd>
388-
A percentage for the horizontal offset is relative to the width of the containing block. A percentage for the vertical offset is relative to height of the containing block.
389-
</dd>
390-
</dl>
391-
392-
<dl>
393-
<dt><var>&lt;length&gt;</var></dt>
394-
<dd>
395-
A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the containing block.
396-
</dd>
397-
</dl>
398-
399-
<dl>
400-
<dt><var>top</var></dt>
401-
<dd>
402-
Computes to 0% for the vertical position.
403-
</dd>
404-
</dl>
405-
406-
<dl>
407-
<dt><var>right</var></dt>
408-
<dd>
409-
Computes to 100% for the horizontal position.
410-
</dd>
411-
</dl>
412-
413-
<dl>
414-
<dt><var>bottom</var></dt>
415-
<dd>
416-
Computes to 100% for the vertical position.
417-
</dd>
418-
</dl>
419-
420-
<dl>
421-
<dt><var>left</var></dt>
422-
<dd>
423-
Computes to 0% for the horizontal position.
424-
</dd>
425-
</dl>
426-
427-
<dl>
428-
<dt><var>center</var></dt>
429-
<dd>
430-
Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
431-
</dd>
432-
</dl>
433-
</p>
434-
435-
<p class="issue">
436-
Between the item and the containing block, which is appropriate for polar-origin value to be referenced of?
437-
</p>
438-
<p class="issue">
439-
As it’s available to specify the point of origin for polar coordinates, properties such as 'margin', 'padding' would work different from the conventional coordinate system. We need different approaches to define those properties which are related to layout.
440-
</p>
441-
442334
<h3 id="polar-angle-property">The 'polar-angle' property</h3>
443335
The 'polar-angle' property specifies the angle from the Y-axis. This property is activated on condition of position: polar.
444336
<pre class='propdef'>
@@ -548,6 +440,105 @@ One of the profits of polar coordinate system is performance improvement. The si
548440
<p class="issue">
549441
By 'polar-distance' property, a position of an element is specified based on the containing block's center. In other way, is the method of positioning elements by the distance based on the edge of the containing block needed?
550442
</p>
443+
444+
<h3 id="polar-origin-property">The 'polar-origin' property</h3>
445+
<p>
446+
The 'polar-origin' property sets a point of origin for polar coordinate system.
447+
<br><br>
448+
Not only elements are positioned within the containing block according to the origin but also properties such as display, margin, and padding are affected by the origin. In conventional coordinate system, the origin of coordinate system implicitly set to upper left corner of the containing block. But in polar coordinates, it is general to specify the point of origin as the center point of the containing block. Also, there would be a situation that the other point in the containing block area need to be the origin.
449+
</p>
450+
<pre class='propdef'>
451+
Name: polar-origin
452+
Applies to: all elements
453+
Value: <<position>>
454+
Initial: 50% 50%
455+
Media: visual
456+
Inherited: no
457+
Percentages: Refer to the size of containing block
458+
Animatable: as <a href="http://www.w3.org/TR/css3-transitions/#animtype-lpcalc">length, percentage, or calc</a>
459+
</pre>
460+
<p>
461+
Where
462+
<dl>
463+
<b>&lt;position&gt;</b> = [
464+
<br>
465+
&nbsp;[ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
466+
<br>
467+
|
468+
<br>
469+
&nbsp;&nbsp;[ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
470+
<br>
471+
&nbsp;&nbsp;[ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
472+
<br>
473+
|
474+
<br>
475+
&nbsp;&nbsp;[ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
476+
<br>
477+
&nbsp;&nbsp;[ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
478+
<br>
479+
]
480+
</dl>
481+
482+
Values are defined as follows:
483+
484+
<dl>
485+
<dt><var>&lt;percentage&gt;</var></dt>
486+
<dd>
487+
A percentage for the horizontal offset is relative to the width of the containing block. A percentage for the vertical offset is relative to height of the containing block.
488+
</dd>
489+
</dl>
490+
491+
<dl>
492+
<dt><var>&lt;length&gt;</var></dt>
493+
<dd>
494+
A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the containing block.
495+
</dd>
496+
</dl>
497+
498+
<dl>
499+
<dt><var>top</var></dt>
500+
<dd>
501+
Computes to 0% for the vertical position.
502+
</dd>
503+
</dl>
504+
505+
<dl>
506+
<dt><var>right</var></dt>
507+
<dd>
508+
Computes to 100% for the horizontal position.
509+
</dd>
510+
</dl>
511+
512+
<dl>
513+
<dt><var>bottom</var></dt>
514+
<dd>
515+
Computes to 100% for the vertical position.
516+
</dd>
517+
</dl>
518+
519+
<dl>
520+
<dt><var>left</var></dt>
521+
<dd>
522+
Computes to 0% for the horizontal position.
523+
</dd>
524+
</dl>
525+
526+
<dl>
527+
<dt><var>center</var></dt>
528+
<dd>
529+
Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
530+
</dd>
531+
</dl>
532+
</p>
533+
534+
<p class="issue">
535+
Between the item and the containing block, which is appropriate for polar-origin value to be referenced of?
536+
</p>
537+
<p class="issue">
538+
As it’s available to specify the point of origin for polar coordinates, properties such as 'margin', 'padding' would work different from the conventional coordinate system. We need different approaches to define those properties which are related to layout.
539+
</p>
540+
541+
551542
<h3 id="polar-anchor-property">The 'polar-anchor' property</h3>
552543
<p>
553544
The 'polar-anchor' property sets an anchor point of the element. The anchor point specifies a position which is a representative point of the element. The anchor point could be set as any point within a content area of the element rather than being positioned to the upper left corner of the element by CSS box model.

0 commit comments

Comments
 (0)