मार्की टेक्स्ट
टेक्स्ट की एक लाइन जो अपनी जगह में नहीं समाती। रुके रहने पर वह एलिप्सिस के साथ कटी रहती है, और जब तक उसका ट्रिगर बना रहता है, वह एक स्थिर रफ़्तार से आड़ी स्क्रॉल होकर अपना पूरा टेक्स्ट दिखाती है। वह सिर्फ़ तब चलती है जब टेक्स्ट बाहर निकलता है, मोशन कम करने पर कभी नहीं चलती, और एक बार, पूरी पढ़ी जाती है।
- श्रेणी
- कम्युनिकेशन
- टोकन
comp.marquee-text- स्तर
- आधार
- Web
tanrei-marquee-textclock_loader_40 - SwiftUI
TanreiMarqueeTextradio_button_unchecked - Jetpack Compose
TanreiMarqueeTextradio_button_unchecked - Flutter
TanreiMarqueeTextradio_button_unchecked - React Native
MarqueeTextradio_button_unchecked
इससे जनरेट किया गया: docs/status/status.json, specs/marquee-text.spec.json
एक शीर्षक जो नहीं समाता, और एक जो समा जाता है
मार्की टेक्स्ट प्रॉडक्ट के टेक्स्ट की एक लाइन है, ऐसी जगह में जो उसके लिए बहुत संकरी है। रुके रहने पर वह किसी भी कटी हुई लाइन की तरह पढ़ी जाती है: लाइन की शुरुआत से शुरू होती है, और जहाँ कटती है वहाँ एलिप्सिस (…) पर ख़त्म होती है। जब तक उसका ट्रिगर बना रहता है (डिफ़ॉल्ट रूप से, जब तक पॉइंटर उसके ऊपर है या जिस कंट्रोल में वह है उस पर कीबोर्ड फ़ोकस है), वह एक स्थिर रफ़्तार से आड़ी स्क्रॉल होती है, जो पिक्सल प्रति सेकंड में दी जाती है, ताकि टेक्स्ट का हर हिस्सा नज़र के सामने से गुज़रे; फिर वह अपनी शुरुआत पर लौटकर रुक जाती है। ऊपर की पहली लाइन पर पॉइंटर ले जाएँ। दूसरी लाइन समा जाती है, इसलिए वह कभी नहीं चलती: जिस मार्की टेक्स्ट का टेक्स्ट समा जाता है, वह टेक्स्ट की एक सादी लाइन है।
यह उन जगहों के लिए है जहाँ लाइन की चौड़ाई तय है और उसका टेक्स्ट आम तौर पर छोटा होता है, पर कभी-कभी नहीं: लिस्ट पंक्ति का शीर्षक, नेविगेशन बार या ड्रॉअर का लेबल, चिप, जो चल रहा है उसका नाम, टेबल का सेल। जहाँ ज़्यादातर समय कटी हुई लाइन काफ़ी है, वहाँ दूसरा तरीक़ा यह है कि उसे कटा रहने दें और पूरा टेक्स्ट टूलटिप में दें, जो उसे एक साथ पूरा दिखाता है और कुछ नहीं चलाता।
Web और React के उदाहरण मौजूदा स्पेक दिखाते हैं। SwiftUI, Compose, Flutter और React Native योजना में हैं: वे अभी मार्की टेक्स्ट नहीं देते।
<!-- डिफ़ॉल्ट: जब पॉइंटर लाइन या उसके कंट्रोल के ऊपर हो, या उस कंट्रोल पर कीबोर्ड फ़ोकस हो, तब चलता है। -->
<tanrei-marquee-text>ट्रैक 7 — एक बहुत लंबा शीर्षक जो अपनी पंक्ति में नहीं समाता</tanrei-marquee-text>
<!-- हर होवर या फ़ोकस पर एक बार, अपने अंत तक जाकर लौटता है। -->
<tanrei-marquee-text loop="bounce" iterations="1">…</tanrei-marquee-text>
<!-- जो चल रहा है उसका नाम: अपने आप चलता है, अपने पॉज़ बटन के साथ। -->
<tanrei-marquee-text trigger="always" playback-control play-label="चलता टेक्स्ट चलाएँ" pause-label="चलता टेक्स्ट रोकें">
अभी चल रहा है: लंबे नाम वाले एक कलाकार के एक गाने का बहुत लंबा शीर्षक
</tanrei-marquee-text>
<script type="module">
import '@tanrei/web/components/marquee-text';
</script>import { MarqueeText } from '@tanrei/react';
<MarqueeText>{track.title}</MarqueeText>
<MarqueeText loop="bounce" iterations={1}>{track.title}</MarqueeText>
{/* अपने आप चलता है; पेज का अपना कंट्रोल, जो हर चलती चीज़ को रोकता है, paused सेट करता है। */}
<MarqueeText trigger="always" paused={motionPaused}>
{`अभी चल रहा है: ${track.title}`}
</MarqueeText>संरचना
| भाग | विवरण |
|---|---|
1 viewport | The line's box: as wide as its place, one line high, clipping the text. While the text moves, its clipped edges fade out. |
2 text | The product's text, on one line, in the text style of where it stands. At rest it starts at the line's start and ends with an ellipsis where it is cut. |
3 copy · वैकल्पिक | While the text repeats, a second drawing of it a gap after the first, so that the line never empties. Hidden from assistive technology. |
4 playback-control · वैकल्पिक | While the text scrolls by itself all the time, an icon-only Button of the text variant and the small size at the line's end, pausing and playing the motion. |
प्रॉपर्टी
| प्रॉपर्टी | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
trigger | hover-or-focus | hover | focus | always | "hover-or-focus" | When the text scrolls. hover: while a fine pointer is over the line or the control it stands in. focus: while that control, or something in the line, has keyboard focus. hover-or-focus: either. always: from when the line is shown, by itself, with a way to pause it. |
loop | repeat | bounce | "repeat" | How a pass goes. repeat: the text moves toward its start until its end has passed, a copy following it a gap behind, so that the line comes back to where it began. bounce: the text moves until its end is in view, pauses, and moves back. |
speed | number | null | How fast the text moves, in pixels per second, so that a long text and a short one move at the same pace. Null takes comp.marquee-text.speed. |
startPause | number | null | How long the text rests at its start before each pass, in milliseconds; 0 rests none. Null takes comp.marquee-text.motion.start-pause. |
endPause | number | null | While loop is bounce: how long the text rests with its end in view before it moves back, in milliseconds. Null takes comp.marquee-text.motion.end-pause. |
iterations | number | null | How many passes a trigger plays before the text rests at its start. Null plays passes without end while the trigger holds: until the pointer leaves or focus moves away for hover, focus and hover-or-focus, and for as long as the line is shown for always. |
paused | boolean | false | Holds the motion where it is: set by the playback control, or by the product's own control that pauses every moving part of the page. |
playbackControl | boolean | false | While trigger is always: whether the line draws its playback control. Off by default: a product that moves text all the time gives a way to pause it — this control, or its own control that pauses every moving part of the page and sets paused; without either, a person cannot stop the motion, which WCAG 2.2.2 requires of motion that lasts more than five seconds. |
playLabel | string | "" | The playback control's accessible name while the motion is paused ("Play scrolling text"). Required while the control is drawn. |
pauseLabel | string | "" | The playback control's accessible name while the text moves ("Pause scrolling text"). Required while the control is drawn. |
स्लॉट
| स्लॉट | विवरण |
|---|---|
default | The text: plain text, or inline content of the product's (a bold run, an inline mark). A fixture's string is drawn as plain text. |
इवेंट
| इवेंट | विवरण |
|---|---|
pausedChange | The person paused or played the motion with the playback control; carries paused. The product that sets paused emits nothing. |
स्टेट
व्यवहार
EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।
| ID | आवश्यकता |
|---|---|
MRQ-1 | THE marquee text SHALL lay its content out on one line, in the text style, color and direction of where it stands, in a viewport as wide as its place and one line high, and SHALL clip it there; WHILE the content fits, THE marquee text SHALL draw it as plain text, start nothing, draw no copy and no playback control, and be in every way a line of text. |
MRQ-2 | WHILE the content does not fit and does not move THE marquee text SHALL rest it with its start at the viewport's start, cut at the viewport's end with an ellipsis of the platform's text, so that the line reads as any cut line does. |
MRQ-3 | WHILE its trigger holds — trigger hover: a fine pointer is over the line or over the nearest element around it that takes presses or focus; focus: that element, or something inside the line, has keyboard focus; hover-or-focus: either; always: the line is shown and in view — and the content does not fit, THE marquee text SHALL wait comp.marquee-text.motion.start-delay (for always, startPause) and then play its passes (MRQ-4, MRQ-5): iterations passes where iterations is not null, and without end while the trigger holds where it is null; after the last pass it SHALL rest as MRQ-2 says. WHEN the trigger ends before the passes do THE marquee text SHALL return the content to its start over comp.marquee-text.motion.return-duration with comp.marquee-text.motion.return-easing and rest; a new trigger SHALL play its passes again from the start. |
MRQ-4 | WHILE loop is repeat THE marquee text SHALL play a pass by moving the content toward its start edge at speed (comp.marquee-text.speed while speed is null) in pixels per second, steadily, with comp.marquee-text.motion.easing, a copy of the content following it comp.marquee-text.gap behind, until the copy stands where the content began — then the line looks as it did — and SHALL rest there startPause (comp.marquee-text.motion.start-pause while it is null) before the next pass. |
MRQ-5 | WHILE loop is bounce THE marquee text SHALL play a pass by moving the content toward its start edge at speed until its end stands at the viewport's end, resting there endPause (comp.marquee-text.motion.end-pause while it is null), moving it back at the same speed until its start stands at the viewport's start, and resting there startPause before the next pass; it SHALL draw no copy. |
MRQ-6 | WHILE the marquee text plays its passes — moving, or resting between two passes — THE marquee text SHALL draw no ellipsis and SHALL fade each edge of the viewport behind which content lies hidden over comp.marquee-text.fade.extent, from clear to the content's full color; WHEN it rests after its passes, or because its trigger ended, it SHALL draw the ellipsis of MRQ-2 again and no fade. |
MRQ-7 | THE marquee text SHALL move the content in the direction its text is written: toward the left for text whose direction is left to right and toward the right for text whose direction is right to left, the direction being the content's own — the base direction of its first strong character, or the layout direction where it has none — so that the line always moves to bring the text's hidden end into view; it SHALL rest it at the start edge of that direction, cut at the other. |
MRQ-8 | WHERE motion is reduced THE marquee text SHALL NOT move its content; WHILE a trigger other than always holds it SHALL instead show the hidden part at once, without a motion, by placing the content so that the next viewport's width of it lies in view, the last view ending at the content's end, with the fade of MRQ-6 at each edge behind which content lies hidden, resting startPause on each such view and returning to the start at once after the last, so that every part of the text can be seen; it SHALL go through the views iterations times, or without end while the trigger holds where iterations is null. WHILE trigger is always it SHALL rest as MRQ-2 says and draw no playback control. |
MRQ-9 | WHILE trigger is always and the content moves THE marquee text SHALL hold its motion where it is while a pointer is over the line or focus is within it, and go on from there when neither is; WHILE paused is true it SHALL hold its motion where it is until paused is false; WHILE the line is out of view or its page is hidden it SHALL hold its motion and start the pass again from the start when it is back. Holding on hover and focus SHALL NOT be taken as the way to stop the motion: that is MRQ-10. |
MRQ-10 | WHILE trigger is always, playbackControl is true, the content does not fit and motion is not reduced, THE marquee text SHALL draw at the end of its line, comp.marquee-text.playback.gap after the viewport, an icon-only Button of the text variant and the small size, showing the icon set's pause glyph while the text moves and play_arrow while it is paused, named by pauseLabel while it moves and playLabel while it is paused; WHEN the person activates it THE marquee text SHALL toggle paused and emit pausedChange once, keeping focus on the button. WHILE trigger is always, the content does not fit, motion is not reduced and playbackControl is false, THE marquee text SHALL in debug builds report once that the product must give the page a control that sets paused, or set playbackControl (WCAG 2.2.2). |
MRQ-11 | THE marquee text SHALL expose its content to assistive technology once, whole, as the text it is, read where the line stands, and SHALL hide the copy, the ellipsis and the fade from it; the motion SHALL change nothing it exposes, SHALL make no announcement, and SHALL take no focus: the line itself is not a focus stop. |
MRQ-12 | WHILE playbackControl would be drawn and playLabel or pauseLabel is empty THE marquee text SHALL read the missing name from the product's words, still draw the control where neither gives it, and in debug builds report that it has no accessible name; THE marquee text SHALL have no words of its own. |
MRQ-13 | WHILE the text size is enlarged THE marquee text SHALL grow its line with the text and move it at speed times the ratio of its text's size to the size of that text style at the default text size, so that as many characters pass in a second at every text size; the fade and the gap SHALL keep their sizes. |
MRQ-14 | WHEN the content, the viewport's width or the text size changes THE marquee text SHALL measure again whether the content fits, and WHILE a pass is playing SHALL end it at once and start again from the start where it still does not fit, or rest as MRQ-1 says where it now does; WHEN speed, startPause, endPause, loop or trigger changes it SHALL take the new value from the next pass. |
MRQ-15 | IF speed is not a positive number, or startPause, endPause or iterations is negative, THE marquee text SHALL treat it as null and in debug builds report it; WHEN trigger or loop names a value the component does not define THE marquee text SHALL use the default value (hover-or-focus, repeat) and in debug builds report the unknown value. |
MRQ-16 | WHERE the layout direction is right-to-left THE marquee text SHALL place its playback control at the left end of the line, and the content SHALL move and rest by its own direction as MRQ-7 says, whatever the layout direction. |
MRQ-17 | THE marquee text SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the line is shown THE marquee text SHALL rest at once and draw itself for the new direction. |
MRQ-18 | WHERE the platform draws with a person's own forced colors THE marquee text SHALL draw its text in the color the platform gives the element around it, and its fade SHALL be no fade: the content is clipped at the viewport's edge. |
प्लैटफ़ॉर्म के अनुसार नामों का मिलान
पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।
| स्पेक | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| कंपोनेंट | tanrei-marquee-text | TanreiMarqueeText | TanreiMarqueeText | TanreiMarqueeText | MarqueeText |
trigger · प्रॉपर्टी | trigger | trigger | trigger | trigger | trigger |
loop · प्रॉपर्टी | loop | loop | loop | loop | loop |
speed · प्रॉपर्टी | speed | speed | speed | speed | speed |
startPause · प्रॉपर्टी | startPause | startPause | startPause | startPause | startPause |
endPause · प्रॉपर्टी | endPause | endPause | endPause | endPause | endPause |
iterations · प्रॉपर्टी | iterations | iterations | iterations | iterations | iterations |
paused · प्रॉपर्टी | paused | isPaused | paused | paused | paused |
playbackControl · प्रॉपर्टी | playbackControl | showsPlaybackControl | playbackControl | playbackControl | playbackControl |
playLabel · प्रॉपर्टी | playLabel | playLabel | playLabel | playLabel | playLabel |
pauseLabel · प्रॉपर्टी | pauseLabel | pauseLabel | pauseLabel | pauseLabel | pauseLabel |
pausedChange · इवेंट | pausedchange | isPaused binding | onPausedChange | onPausedChanged | onPausedChange |
| टिप्पणियाँ | <tanrei-marquee-text trigger loop speed start-pause end-pause iterations paused playback-control play-label pause-label>text</tanrei-marquee-text>. The slotted text is drawn once; the copy of MRQ-4 is a clone in the shadow root with aria-hidden="true" and inert. Whether the text fits is read with a ResizeObserver on the viewport and when the slotted text changes; the motion of a whole run of passes is one Web Animations API translate animation whose keyframes hold the pauses, each pass's travel lasting the distance divided by speed. The fade is a mask-image gradient. The trigger's area is the nearest ancestor, across shadow roots, that takes presses or focus, and the host where there is none; hover is read from pointerenter and pointerleave of a mouse or a pen, focus from focusin and focusout of an element that matches :focus-visible. The playback control is a <tanrei-button variant="text" size="small"> in the shadow root. The text size of MRQ-13 is the ratio of the browser's default font size (font-size: medium) to 16 px. The element <marquee> is not used: it is deprecated, ignores reduced motion and cannot be paused by the person. | A TimelineView(.animation) offset inside a clipped ViewThatFits-measured line; the copy is accessibilityHidden(true); accessibilityReduceMotion from the environment. | Not Modifier.basicMarquee alone: it cannot pause, has no bounce, and ignores the motion settings by design (it runs under a fixed motion scale). Built on the same measurement (no motion when the content fits) with an Animatable offset, and reads the animator duration scale for reduced motion. | A Ticker-driven offset in a ClipRect; the copy inside ExcludeSemantics; MediaQuery.disableAnimationsOf for reduced motion. | An Animated offset on the native driver; the copy with importantForAccessibility="no-hide-descendants" and accessibilityElementsHidden; AccessibilityInfo.isReduceMotionEnabled for reduced motion. hover applies where the platform has a pointer (iPadOS, the web build). |
टोकन
| टोकन | किसका एलियास | रिज़ॉल्व किया गया मान (लाइट) |
|---|---|---|
--tanrei-comp-marquee-text-fade-extent | sys.space.space200 | 16px |
--tanrei-comp-marquee-text-gap | sys.space.space600 | 48px |
--tanrei-comp-marquee-text-motion-easing | sys.motion.easing.linear | cubic-bezier(0, 0, 1, 1) |
--tanrei-comp-marquee-text-motion-end-pause | — | 1200ms |
--tanrei-comp-marquee-text-motion-return-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-marquee-text-motion-return-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-marquee-text-motion-start-delay | sys.motion.role.show-delay | 300ms |
--tanrei-comp-marquee-text-motion-start-pause | — | 1200ms |
--tanrei-comp-marquee-text-playback-gap | sys.space.space100 | 8px |
--tanrei-comp-marquee-text-speed | — | 30 |
फ़िक्स्चर
मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।
default
slots: default fits
slots: default bounce
loop: bounce slots: default always
trigger: always slots: default always-control
trigger: always playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text slots: default always-paused
trigger: always paused: true playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text slots: default rtl
trigger: always playbackControl: true playLabel: Play scrolling text pauseLabel: Pause scrolling text direction: rtl slots: default इससे जनरेट किया गया: specs/marquee-text.spec.json, tokens/comp/marquee-text.tokens.json, design/tokens/
मार्की टेक्स्ट वहाँ इस्तेमाल करें जहाँ लाइन को एक ही लाइन रहना है, उस चौड़ाई पर जो लेआउट तय करता है, और किसी व्यक्ति को कभी-कभी कटा हुआ हिस्सा चाहिए: प्लेलिस्ट की किसी पंक्ति में गाने का लंबा नाम, किसी डेस्टिनेशन का लेबल जिसे कोई भाषा लंबा कर देती है, नाम वाली चिप। लाइन अपनी ऊँचाई और जगह बनाए रखती है, और बाक़ी हिस्सा सिर्फ़ माँगने पर दिखाती है।
इसे ऐसे टेक्स्ट के लिए इस्तेमाल न करें जिसे कुछ करने से पहले पूरा पढ़ना ज़रूरी हो: चेतावनी, त्रुटि, किसी चुनाव की शर्तें, रक़म, निर्देश। चलता टेक्स्ट पढ़ने में धीमा होता है और आसानी से छूट जाता है। ऐसे टेक्स्ट को जितनी लाइनें चाहिए, उतनी दें, और उसे रैप होने दें।
| ट्रिगर | किसके लिए |
|---|---|
hover-or-focus |
डिफ़ॉल्ट, और लगभग हर जगह सही चुनाव: व्यक्ति जब पॉइंटर से लाइन की ओर इशारा करता है या कीबोर्ड से उसके कंट्रोल तक पहुँचता है, दोनों बार लाइन चलती है, इसलिए दोनों को एक ही चीज़ दिखती है। |
hover |
एक लंबी लिस्ट जिसमें कीबोर्ड इस्तेमाल करने वाले लोग तेज़ी से आगे बढ़ते हैं, जहाँ फ़ोकस गुज़रते ही हर पंक्ति के शीर्षक का चल पड़ना मदद से ज़्यादा ध्यान भटकाएगा। |
focus |
ऐसी सरफ़ेस की लाइन जो ज़्यादातर कीबोर्ड या रिमोट कंट्रोल से चलाई जाती है, जहाँ होवर का कोई मतलब नहीं। |
always |
जो चल रहा है उसका नाम, और ऐसी लाइनें जिन पर व्यक्ति इशारा नहीं करता, बस नज़र डालता है। वह दिखते ही अपने आप चलती है, और उसे रोकने का तरीक़ा चाहिए (सुलभता देखें)। |
ट्रिगर का दायरा वह कंट्रोल है जिसमें लाइन है (एक पंक्ति, एक चिप, एक डेस्टिनेशन), सिर्फ़ लाइन नहीं: पंक्ति में कहीं भी पॉइंटर ले जाने पर उसका शीर्षक चलता है। होवर में सिर्फ़ बारीक पॉइंटर गिना जाता है, जैसे माउस या पेन; टच से मोशन शुरू नहीं होता।
repeat(डिफ़ॉल्ट) टेक्स्ट को उसकी शुरुआत की ओर तब तक चलाता है जब तक उसका अंत गुज़र न जाए, और एक कॉपी थोड़ी दूरी पर उसके पीछे चलती है, ताकि लाइन कभी ख़ाली न हो और वहीं लौट आए जहाँ से शुरू हुई थी। यह न्यूज़ टिकर जैसा पढ़ा जाता है, और उस लाइन के लिए ठीक है जो कुछ देर तक चलती है।bounceटेक्स्ट को तब तक चलाता है जब तक उसका अंत नज़र में न आ जाए, वहाँ रुकता है, और उसे वापस ले जाता है। यह कोई कॉपी नहीं बनाता, इसलिए अंत और शुरुआत कभी साथ-साथ नहीं दिखते। यह उस लाइन के लिए ठीक है जो एक बार चलती है, अंत पर एक छोटी नज़र के लिए।
दोनों टेक्स्ट को उसी दिशा में चलाते हैं जिसमें वह लिखा है: बाएँ से दाएँ वाले टेक्स्ट को बाईं ओर, दाएँ से बाएँ वाले को दाईं ओर, चाहे आसपास का पेज किसी भी दिशा में हो।
speedपिक्सल प्रति सेकंड में है, पूरे दौर के समय में नहीं, इसलिए लंबा और छोटा शीर्षक एक ही रफ़्तार से चलते हैं। इसे टोकनcomp.marquee-text.speedपर छोड़ दें, ताकि प्रॉडक्ट की हर चलती लाइन एक ही रफ़्तार रखे। टेक्स्ट का साइज़ बढ़ने पर रफ़्तार भी टेक्स्ट के साथ बढ़ती है, और हर साइज़ पर एक सेकंड में उतने ही अक्षर गुज़रते हैं।startPauseयह है कि हर दौर से पहले टेक्स्ट अपनी शुरुआत पर कितनी देर रुकता है, ताकि उसकी शुरुआत पढ़ी जा सके।trigger="always"के साथ यह पहले दौर से पहले का इंतज़ार भी है।endPause,bounceके साथ, यह है कि लौटने से पहले टेक्स्ट अपना अंत दिखाते हुए कितनी देर रुकता है।iterationsयह है कि एक ट्रिगर कितने दौर चलाता है, जिसके बाद टेक्स्ट अपनी शुरुआत पर रुक जाता है। null रहने पर दौर तब तक चलते रहते हैं जब तक पॉइंटर हट न जाए या फ़ोकस आगे न बढ़ जाए, औरalwaysके लिए तब तक जब तक लाइन दिखती है। ऐसी गिनती जो मोशन को छोटा रखे, वही होवर या फ़ोकस वाले ट्रिगर को सुलभ बनाती है (नीचे देखें)।
ठहराव पढ़ने का समय हैं। प्रॉडक्ट की मोशन सेटिंग, जो ऐनिमेशन को तेज़ या धीमा करती है, उन्हें छोटा नहीं करती।
टेक्स्ट इतना छोटा रखें कि लोगों को उसे चलते हुए देखने की ज़रूरत कम ही पड़े: मार्की उस इक्का-दुक्का शीर्षक के लिए है जो बाक़ियों से लंबा है, किसी वाक्य को चिप में ठूँसने का तरीक़ा नहीं। जो बात चीज़ों को एक-दूसरे से अलग करती है, उसे शुरुआत में रखें, जहाँ वह बिना मोशन के पढ़ी जाती है। टेक्स्ट में इनलाइन कॉन्टेंट हो सकता है, जैसे बोल्ड हिस्सा; वह हमेशा एक लाइन रहता है।
- लाइन को उस कंट्रोल में रखें जिस पर व्यक्ति पॉइंटर ले जाता है या फ़ोकस करता है, ताकि ट्रिगर का दायरा पूरी पंक्ति हो।
iterationsसेट करें, ताकि हर होवर या फ़ोकस एक छोटा दौर चलाकर रुक जाए।trigger="always"वाली लाइन को रोकने का तरीक़ा दें: उसका अपना प्लेबैक कंट्रोल, या प्रॉडक्ट का वह कंट्रोल जो पेज की हर चलती चीज़ को रोकता है।
- इसे ऐसे टेक्स्ट के लिए इस्तेमाल न करें जिसे कुछ करने से पहले पूरा पढ़ना ज़रूरी हो। उस टेक्स्ट को उसकी अपनी लाइनें दें।
- एक स्क्रीन पर हमेशा चलने वाली कई लाइनें न रखें। एक चलती लाइन भी नज़र खींचती है; कई लाइनें एक-दूसरे से और स्क्रीन की बाक़ी हर चीज़ से होड़ करती हैं।
- मोशन शुरू करने के लिए लाइन को ख़ुद बटन या लिंक न बनाएँ। वह टेक्स्ट है; व्यक्ति उसके आसपास का कंट्रोल दबाता है।
- लंबे टेक्स्ट को छोटे दौर में समाने के लिए ठहराव छोटे न करें। टेक्स्ट छोटा करें, या उसे किसी और तरीक़े से पूरा दिखाएँ।
- रोल
none (text)- लेबलिंग
- The text is read once, whole, as text; the copy is hidden. The playback control is named by pauseLabel and playLabel, from the instance and then the product's words.
- न्यूनतम टार्गेट
- दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px
कीबोर्ड
| कुंजियाँ | क्रिया |
|---|---|
| Tab | Reaches the playback control while it is drawn; the line itself is not a stop. Focus on the control the line stands in (a row, a chip) starts the motion for trigger focus and hover-or-focus, and moving focus away stops it. |
| Enter / Space on the playback control | Pauses or plays the motion. |
टिप्पणियाँ
- Pause, Stop, Hide (WCAG 2.2.2): motion that starts without a person's direct action and lasts more than five seconds beside other content needs a way to pause, stop or hide it, and the Understanding document counts motion started by a hover, a focus or scrolling into view, and stopped only while focused, as not meeting that. The defaults can conflict with it: trigger always draws no playback control (playbackControl is false), and a hover or a focus plays passes until it ends (iterations is null). A product meets it by drawing the playback control or binding its page-wide pause control to paused for trigger always, and by setting iterations so that the motion a hover or a focus starts ends within five seconds, or by keeping such lines where nothing else is read beside them.
- Animation from interactions (WCAG 2.3.3): where motion is reduced, the line never moves; the hidden part is still shown, a viewport at a time, without a motion (MRQ-8).
- The minimum target is the playback control's, a Button's; the line takes no input of its own.
इससे जनरेट किया गया: specs/marquee-text.spec.json, tokens/sys/measure.tokens.json
Pause, Stop, Hide (WCAG 2.2.2, लेवल A) माँगता है कि जो मोशन अपने आप शुरू होता है, पाँच सेकंड से ज़्यादा चलता है और दूसरे कॉन्टेंट के साथ दिखता है, उसे व्यक्ति रोक, बंद या छिपा सके। Tanrei के डिफ़ॉल्ट अपने आप में इसे पूरा नहीं करते, दो तरह से, और इसे कैसे पूरा करना है यह प्रॉडक्ट तय करता है।
trigger="always"डिफ़ॉल्ट रूप से कोई प्लेबैक कंट्रोल नहीं बनाता (playbackControlfalse है)। जो लाइन दूसरे कॉन्टेंट के साथ पाँच सेकंड से ज़्यादा हमेशा चलती रहती है, उसे रोकने का तरीक़ा चाहिए। या तोplaybackControlसेट करें, तो लाइन अपने अंत पर सिर्फ़ आइकन वाला पॉज़ और प्ले बटन बनाती है, जिसका नामpauseLabelऔरplayLabelसे, या प्रॉडक्ट के शब्दोंmarqueePauseLabelऔरmarqueePlayLabelसे आता है; या प्रॉडक्ट का अपना वह कंट्रोल, जो पेज की हर चलती चीज़ को रोकता है,pausedसे जोड़ें। जो लाइन इन दोनों में से किसी के बिना हमेशा चलती है, उसे डीबग बिल्ड रिपोर्ट करता है।hover,focusऔरhover-or-focusके साथ,iterationsnull होने पर दौर तब तक चलते रहते हैं जब तक पॉइंटर हट न जाए या फ़ोकस आगे न बढ़ जाए। WCAG का Understanding दस्तावेज़ होवर या फ़ोकस से शुरू हुए मोशन को अपने आप शुरू होने वाला मोशन मानता है, और कहता है कि जो मोशन सिर्फ़ फ़ोकस हटने पर रुकता है, वह उसे रोकने का तरीक़ा नहीं है। 2.2.2 पूरा करने के लिएiterationsऐसा सेट करें कि मोशन पाँच सेकंड के भीतर ख़त्म हो जाए। लंबे टेक्स्ट में एक दौर ही इससे ज़्यादा ले सकता है: टेक्स्ट छोटा करें या रफ़्तार बढ़ाएँ, या पूरा टेक्स्ट किसी और तरीक़े से दिखाएँ।
जब तक पॉइंटर लाइन के ऊपर है या फ़ोकस उसके भीतर है, और जब तक वह नज़र से बाहर है या उसका पेज छिपा है, लाइन अपना मोशन वहीं थामे रखती है। इससे उसे पढ़ना आसान होता है, पर यह उसे रोकने का तरीक़ा नहीं है।
- यह सिर्फ़ तब चलता है जब टेक्स्ट नहीं समाता। जिस लाइन का टेक्स्ट समा जाता है, वह सादा टेक्स्ट बनाती है और कुछ शुरू नहीं करती।
- जब मोशन कम करने का अनुरोध हो (WCAG 2.3.3), यह कभी नहीं चलता। होवर या फ़ोकस पर यह छिपा हुआ हिस्सा एक बार में लाइन की चौड़ाई भर, बिना मोशन के दिखाता है और हर हिस्से पर रुकता है, ताकि टेक्स्ट का हर हिस्सा फिर भी देखा जा सके;
trigger="always"वाली लाइन कटी हुई रुकी रहती है और कोई प्लेबैक कंट्रोल नहीं बनाती। - सहायक तकनीक टेक्स्ट को, जहाँ लाइन है वहीं, एक बार, पूरा, टेक्स्ट के रूप में पढ़ती है। कॉपी, एलिप्सिस और फ़ेड उससे छिपे रहते हैं, और मोशन उसके पढ़े हुए में कुछ नहीं बदलता और कुछ पढ़कर नहीं सुनवाता।
- लाइन फ़ोकस के क्रम में कोई पड़ाव नहीं है। Tab उस कंट्रोल तक पहुँचता है जिसमें लाइन है, और प्लेबैक कंट्रोल तक जब वह दिखता है।
- प्लेबैक कंट्रोल text वेरिएंट और small साइज़ का बटन है, जो टेक्स्ट चलते समय आइकन सेट का पॉज़ ग्लिफ़ और रुके होने पर प्ले ग्लिफ़ दिखाता है। Enter या Space उसे बदलता है, फ़ोकस बटन पर ही रहता है, और
pausedChangeएमिट होता है। उसका टार्गेट न्यूनतम टार्गेट पूरा करता है। - दाएँ से बाएँ वाले लेआउट में प्लेबैक कंट्रोल लाइन के बाएँ सिरे पर होता है; टेक्स्ट अपनी दिशा के हिसाब से चलता है।
- फ़ोर्स्ड कलर्स में टेक्स्ट वह रंग लेता है जो प्लैटफ़ॉर्म आसपास के एलिमेंट को देता है, और उसके किनारे फ़ेड होने के बजाय काट दिए जाते हैं।
- इसके अपने कोई शब्द नहीं हैं। जिस प्लेबैक कंट्रोल को न इंस्टेंस से नाम मिलता है न प्रॉडक्ट के शब्दों से, वह फिर भी दिखता है और डीबग बिल्ड में रिपोर्ट होता है; अनजान
triggerयाloop, और सीमा से बाहर की रफ़्तार, ठहराव या गिनती भी रिपोर्ट होती है।
Web कंपोनेंट HTML का <marquee> एलिमेंट नहीं है। वह एलिमेंट 
डेप्रिकेटेड है, मोशन कम करने की सेटिंग को अनदेखा करता है, और व्यक्ति उसे रोक नहीं सकता।
- ऊपर बताए तरीक़े से WCAG 2.2.2 पूरा करें:
trigger="always"वाली हर लाइन को रोकने का तरीक़ा, औरiterationsकी ऐसी गिनती जो होवर या फ़ोकस से शुरू हुआ मोशन पाँच सेकंड के भीतर ख़त्म कर दे। - प्लेबैक कंट्रोल को उसके दोनों नाम दें, इंस्टेंस में या एक बार प्रॉडक्ट के शब्दों में, पेज की भाषा में: “चलता टेक्स्ट रोकें” और “चलता टेक्स्ट चलाएँ” बताते हैं कि बटन क्या करता है।
- जिस टेक्स्ट को पूरा पढ़ना ज़रूरी है, उसे मार्की में न रखें: कटी हुई लाइन उसे उस व्यक्ति से छिपाए रखती है जो मोशन कभी शुरू नहीं करता।
- एक स्क्रीन पर हमेशा चलने वाली एक ही लाइन रखें, और कोई भी ऐसे लंबे टेक्स्ट के पास नहीं जिसे व्यक्ति पढ़ रहा है।