Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rendering: define progress, meter, range input's value layout with vertical writing-mode to support direction #10096

Merged
merged 8 commits into from
Mar 4, 2024
Merged

Rendering: define progress, meter, range input's value layout with vertical writing-mode to support direction #10096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
932172a
Update progress, meter, range input's value layout on writing-mode an…
dizhang168 Jan 26, 2024
03b56c3
Use writing mode to describe horizontal/vertical
dizhang168 Feb 1, 2024
36f3c06
Improve sample-progress.png image and progress text
dizhang168 Feb 2, 2024
78ba066
Remove square progress spec and example
dizhang168 Feb 6, 2024
100c537
Change wording to is vertical/is horizontal
dizhang168 Feb 12, 2024
cc1a8ae
Add definitions for vertical & horizontal writing mode
dizhang168 Feb 13, 2024
8dcf355
Review change: add writing-mode subsection
dizhang168 Feb 29, 2024
80dcbd3
Fix image width
domenic Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified images/sample-progress.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 42 additions & 29 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3894,6 +3894,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<ul class="brief">
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#direction">'direction'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#unicode-bidi">'unicode-bidi'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode">'writing-mode'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-axis">block axis</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#inline-axis">inline axis</dfn>,
Expand Down Expand Up @@ -49826,7 +49827,7 @@ ldh-str = &lt; as defined in <a href="https://www.rfc-editor.org/rfc/rfc10

<p>...with the following style sheet applied:</p>

<pre><code class="css">input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</code></pre>
<pre><code class="css">input { writing-mode: vertical-lr; height: 75px; width: 49px; background: #D5CCBB; color: black; }</code></pre>

<p>...might render as:</p>

Expand Down Expand Up @@ -132719,6 +132720,23 @@ input[type=image i][align=bottom i], object[align=bottom i] {
</div>


<div w-nodev>

<h4>Writing mode</h4>

<p>Several widgets have their rendering controlled by the <span>'writing-mode'</span> CSS
property. For the purposes of those widgets, we have the following definitions.</p>

<p>A <dfn>horizontal writing mode</dfn> is when resolving the <span>'writing-mode'</span>
property of the control results in a computed value of 'horizontal-tb'.</p>

<p>A <dfn>vertical writing mode</dfn> is when resolving the <span>'writing-mode'</span> property
of the control results in a computed value of either 'vertical-rl', 'vertical-lr', 'sideways-rl'
or 'sideways-lr'.</p>

</div>


<div w-nodev>

<h4>Button layout</h4>
Expand Down Expand Up @@ -132948,20 +132966,16 @@ details[open] > summary:first-of-type {
widget</span>. Its expected <span>native appearance</span> is to render as an
<span>'inline-block'</span> box depicting a slider control.</p>

<p>When the control is wider than it is tall (or square), the control is expected to be a
horizontal slider, with the lowest value on the right if the <span>'direction'</span> property on
this element has a <span>computed value</span> of 'rtl', and on the left otherwise. When the
control is taller than it is wide, it is expected to be a vertical slider, with the lowest value
on the bottom.</p>
<p>When this control has a <span>horizontal writing mode</span>, the control is expected to be a
horizontal slider. Its lowest value is on the right if the <span>'direction'</span> property has a
<span>computed value</span> of 'rtl', and on the left otherwise. When this control has a
<span>vertical writing mode</span>, it is expected to be a vertical slider. Its lowest value is on
the bottom if the <span>'direction'</span> property has a <span>computed value</span> of 'rtl', and
on the top otherwise.</p>

<p>Predefined suggested values (provided by the <code data-x="attr-input-list">list</code>
attribute) are expected to be shown as tick marks on the slider, which the slider can snap to.</p>

<p>User agents are expected to use the <span>used value</span> of the <span>'direction'</span>
property on the element to determine the direction in which the slider operates. Typically, a
left-to-right ('ltr') horizontal control would have the lowest value on the left and the highest
value on the right, and vice versa.</p>

<p class="XXX">Need to detail the expected <span>primitive appearance</span>.</p>
</div>

Expand Down Expand Up @@ -133218,11 +133232,12 @@ meter { appearance: auto; }</code></pre>
of '1em' and a <span>'inline-size'</span> of '5em', a <span>'vertical-align'</span> of '-0.2em', and
with its contents depicting a gauge.</p>

<p>When the element is wider than it is tall (or square), the depiction is expected to be of a
horizontal gauge, with the minimum value on the right if the <span>'direction'</span> property on
this element has a <span>computed value</span> of 'rtl', and on the left otherwise. When the
element is taller than it is wide, it is expected to depict a vertical gauge, with the minimum
value on the bottom.</p>
<p>When this element has a <span>horizontal writing mode</span>, the depiction is expected to be of
a horizontal gauge. Its minimum value is on the right if the <span>'direction'</span> property has
a <span>computed value</span> of 'rtl', and on the left otherwise. When this element has a
<span>vertical writing mode</span>, it is expected to depict a vertical gauge. Its minimum value is
on the bottom if the <span>'direction'</span> property has a <span>computed value</span> of 'rtl',
and on the top otherwise.</p>

<p>User agents are expected to use a presentation consistent with platform conventions for gauges,
if any.</p>
Expand All @@ -133248,26 +133263,23 @@ progress { appearance: auto; }</code></pre>
<span>'block-size'</span> of '1em' and a <span>'inline-size'</span> of '10em', and a
<span>'vertical-align'</span> of '-0.2em'.</p>

<!-- https://software.hixie.ch/utilities/js/canvas/?c.clearRect(0%2C%200%2C%20640%2C%20480)%3B%0Ac.save()%3B%0Atry%20{%0A%20%20c.fillStyle%20%3D%20'black'%3B%0A%20%20c.font%20%3D%20'8px%20sans-serif'%3B%0A%20%20c.fillText('Wide'%2C%2043%2C105)%3B%0A%20%20c.fillText('Tall'%2C%20100%2C105)%3B%0A%20%20c.fillText('Square'%2C%20128%2C105)%3B%0A%20%20c.font%20%3D%20'700%2010px%20sans-serif'%3B%0A%20%20c.fillText('Progress%20Bars'%2C%2013%2C30)%3B%0A%20%20c.font%20%3D%20'100%2010px%20sans-serif'%3B%0A%20%20c.fillText('(80%25)'%2C%2037%2C45)%3B%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(10%2C0%2C80%2C0)%3B%0A%20%20g.addColorStop(0%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.8%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.9%2C%20'%23FFFF00')%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(10%2C80%2C80%2C15)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(0%2C80%2C0%2C20)%3B%0A%20%20g.addColorStop(0%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.75%2C%20'%2300FF00')%3B%0A%20%20g.addColorStop(0.85%2C%20'%23FFFF00')%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(100%2C15%2C15%2C80)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20c.fillStyle%20%3D%20'yellow'%3B%0A%20%20c.arc(140%2C80%2C15%2C0%2C2*Math.PI%2C%20true)%3B%0A%20%20c.fill()%3B%0A%20%20c.beginPath()%3B%0A%20%20c.fillStyle%20%3D%20'lime'%3B%0A%20%20c.moveTo(140%2C80)%3B%0A%20%20c.arc(140%2C80%2C15%2C-Math.PI%2F2%2C1.2*Math.PI%2C%20false)%3B%0A%20%20c.fill()%3B%0A%20%20c.beginPath()%3B%0A%20%20c.arc(140%2C80%2C15%2C0%2C2*Math.PI%2C%20true)%3B%0A%20%20c.strokeStyle%20%3D%20'black'%3B%0A%20%20c.stroke()%3B%0A}%20finally%20{%0A%20%20c.restore()%3B%0A}%0A -->
dizhang168 marked this conversation as resolved.
Show resolved Hide resolved
<!-- https://software.hixie.ch/utilities/js/canvas/?c.clearRect(0%2C%200%2C%20640%2C%20480)%3B%0Ac.save()%3B%0Atry%20%7B%0A%20%20c.fillStyle%20%3D%20%27black%27%3B%0A%20%20c.font%20%3D%20%278px%20sans-serif%27%3B%0A%20%20c.fillText(%27Horizontal%20ltr%27%2C%2030%2C105)%3B%0A%20%20c.fillText(%27Horizontal%20rtl%27%2C125%2C105)%3B%0A%20%20c.fillText(%27Vertical%20ltr%27%2C%20192%2C105)%3B%0A%20%20c.fillText(%27Vertical%20rtl%27%2C%20233%2C105)%3B%0A%20%20c.font%20%3D%20%27700%2010px%20sans-serif%27%3B%0A%20%20c.fillText(%27Progress%20Bars%27%2C%2013%2C30)%3B%0A%20%20c.font%20%3D%20%27100%2010px%20sans-serif%27%3B%0A%20%20c.fillText(%27(80%25)%27%2C%2037%2C45)%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(10%2C0%2C80%2C0)%3B%0A%20%20g.addColorStop(0%2C%20%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.8%2C%20%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.9%2C%20%27%23FFFF00%27)%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(10%2C80%2C80%2C15)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20%27black%27%3B%0A%20%20c.stroke()%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(105%2C0%2C175%2C0)%3B%0A%20%20g.addColorStop(0%2C%20%27%23FFFF00%27)%3B%0A%20%20g.addColorStop(0.2%2C%20%27%23FFFF00%27)%3B%0A%20%20g.addColorStop(0.4%2C%20%27%2300FF00%27)%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(105%2C80%2C80%2C15)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20%27black%27%3B%0A%20%20c.stroke()%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(0%2C80%2C0%2C20)%3B%0A%20%20g.addColorStop(0%2C%20%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.75%2C%20%27%2300FF00%27)%3B%0A%20%20g.addColorStop(0.85%2C%20%27%23FFFF00%27)%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(203%2C15%2C15%2C80)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20%27black%27%3B%0A%20%20c.stroke()%3B%0A%0A%20%20c.beginPath()%3B%0A%20%20var%20g%20%3D%20c.createLinearGradient(0%2C80%2C0%2C20)%3B%0A%20%20g.addColorStop(0%2C%20%27%23FFFF00%27)%3B%0A%20%20g.addColorStop(0.15%2C%20%27%2300FF00%27)%3B%0A%20%20c.fillStyle%20%3D%20g%3B%0A%20%20c.rect(242%2C15%2C15%2C80)%3B%0A%20%20c.fill()%3B%0A%20%20c.strokeStyle%20%3D%20%27black%27%3B%0A%20%20c.stroke()%3B%0A%7D%20finally%20%7B%0A%20%20c.restore()%3B%0A%7D%0A -->

<p> <img src="/images/sample-progress.png" alt="" width=157 height=103 class="extra"> When the
element is wider than it is tall, the element is expected to be depicted as a horizontal progress
bar, with the start on the right and the end on the left if the <span>'direction'</span> property
on this element has a <span>computed value</span> of 'rtl', and with the start on the left and the
end on the right otherwise. When the element is taller than it is wide, it is expected to be
depicted as a vertical progress bar, with the lowest value on the bottom. When the element is
square, it is expected to be depicted as a direction-independent progress widget (e.g. a circular
progress ring).</p>
<p> <img src="/images/sample-progress.png" alt="" width=276 height=115 class="extra"> When the this
element has a <span>horizontal writing mode</span>, the element is expected to be depicted as a
horizontal progress bar. The start is on the right and the end is on the left if the
<span>'direction'</span> property on this element has a <span>computed value</span> of 'rtl', and
with the start on the left and the end on the right otherwise. When this element has a
<span>vertical writing mode</span>, it is expected to be depicted as a vertical progress bar. The
start is on the bottom and the end is on the top if the <span>'direction'</span> property on this
element has a <span>computed value</span> of 'rtl', and with the start on the top and the end on
the bottom otherwise.</p>

<p>User agents are expected to use a presentation consistent with platform conventions for
progress bars. In particular, user agents are expected to use different presentations for
determinate and indeterminate progress bars. User agents are also expected to vary the
presentation based on the dimensions of the element.</p>

<p class="example">For example, on some platforms for showing indeterminate progress there is a
"spinner" progress indicator with square dimensions, which could be used when the element is
square, and an indeterminate progress bar, which could be used when the element is wide.</p>

<p class="note">Requirements for how to determine if the progress bar is determinate or
indeterminate, and what progress a determinate progress bar is to show, are included in the
definition of the <code>progress</code> element.</p>
Expand Down Expand Up @@ -141612,6 +141624,7 @@ INSERT INTERFACES HERE
Devarshi Pant,
Devdatta,
Devin Rousso,
Di Zhang,
Diego Ferreiro Val,
Diego Gonz&aacute;lez Z&uacute;&ntilde;iga, <!-- diekus on GitHub -->
Diego Ponce de León,
Expand Down
Loading