若要在瀏器中製作跑馬燈 LED 顯示器，請在 LED 跑馬燈工具中輸入一段簡短訊息，從三種固定速度預設（慢、中、快）中選擇一種，選擇移動方向（由右至左或由左至右），並將文字大小設定在 32 到 96 CSS 像素之間。按下「開始捲動」即可啟動預覽；該工具接著會使用 CSS 關鍵影格，在乾淨的軌道上渲染一條會循環播放的大型等寬幅，整個過程都不會離開目前的分頁。可見的橫幅採用 LED 風格，而非模擬特定的點矩陣面板，這代表它仰賴瀏器可用的字型與以 CSS 為基礎的計時模型，而非實體的重新整理頻率。該頁面也會遵循作業系統的「偏好減少動畫」設定，因此在要求較平靜介面的裝置上，橫幅會保持暫停，您仍可完整控制訊息內容。編輯任何輸入都會清除目前的預覽，讓螢幕上的幅絕不會在無聲無息中與控制項不一致；而此頁面在設計上也刻意避免讓動態裝飾橫幅成為緊急或無障礙通知的唯一管道。
LED 跑馬預覽一覽
LED 跑馬燈工具會將單行文字轉換為在瀏覽器分頁中循環播放的動態橫幅。它使用大型等寬瀏覽器文字、加大的字元間距、網站本身的色彩權杖，以及一條乾淨的水平軌道——其成果看起來像熟悉的移動跑馬燈，而非實體硬體。
這個區別很重要，因為此預覽對其範圍相當誠實。它並非模擬某個命名的點矩陣字型、電子重新整理頻率、點距、亮度等級、實體招牌控制器，或製造商通訊協定。渲染出的形狀取決於瀏器中安裝的字型。若專案需要精確的招牌尺寸、認證亮度、遠端排程或硬體匯出，正確的解答應為該實體顯示器隨附的軟體，而非這個小工具。
至於其他用途——快速手持標示、活動提示、桌面訊息、簡報提示、拍照道具，以及視覺注意力信號——瀏覽器預覽已足夠，而這正是 LED 跑馬燈工具所填補的空缺。
輸入、限制與驗證器會拒絕的內容
在任何動畫開始之前，訊息會經過嚴格的規則集驗證，以確保預覽絕不會對其內容做出不實的呈現。
- 空白輸入會遭到拒絕。訊息在修剪掉外部空白字元後，必須至少包含一個字元。
- 外部空白字元會被移除。開頭與結尾的空白不會出現在可見的幅上。
- 控制字元、換行符，以及 Unicode 行或段落分隔符會遭到拒絕。橫幅為單行，因此不可見的分隔符會產生令人困惑的輸出。
- 120 字元上限。訊息最多可包含 120 個 Unicode 碼點。表情符號、帶有變音符號的字母、標點符號及非拉丁文文字各算一個字元，而非原始的 UTF-16 單位，因此單一表情符號不會被誤算為兩個字元。
- 不進行靜默改寫。此工具不會縮短超出長度限制的訊息、替換不支援的文字、轉換大小寫、校正拼字、進行翻譯，或插入裝飾性符號。
若驗證失敗，預覽便不會啟動；若驗證成功，可見的橫幅會與控制項完全一致，因為編輯任何輸入都會讓先前的預覽失效，而再次按下「開始」時，會在新的動畫出現之前重新驗證目前的完整設定。
逐步打造橫幅
- 在瀏覽器中開啟 LED 跑馬燈。
- 在文字欄位中輸入一段簡短訊息。請挑選在您預計使用的大小下能清晰閱讀的詞句。
- 選擇速度預設：慢（每次循環 12 秒）、中（8 秒）或快（4 秒）。這些代表的是 CSS 循環的總時間，而非校準過的像素速率。
- 選擇移動方向：由右至左可呈現經典的跑馬風格；若希望文字從另一側進入，則選擇由左至右。
- 從 32 到 96 CSS 像素之間的五個固定選項中選擇文字大小。
- 按下「開始捲動」。小工具會驗證設定，接著在預覽區域中渲染全新的動畫。
- 至少觀看一次完整的循環，以確認訊息在目前的大小與速度下於您的螢幕上清晰可讀。
- 若觀看者需要仔細閱讀，可使用「暫停」凍結目前的畫面，「繼續」會從中斷處接續相同的動作，「重新開始」則會將文字送回初始位置。
若需要以指南形式平行說明相同的工作流程，請參閱在瀏覽器中製作跑馬 LED 招牌。
實際運用中的速度、方向與大小
三種速度標籤是透明的介面預設，而非實體規格。慢速在 12 秒內完成一次 CSS 循環，中速為 8 秒，快速則為 4 秒。由於循環時間固定，但訊息寬度、字型大小、瀏器寬度與縮放等級都會改變每個影格中文字移動的距離，因此實際感受的速度會因情況而異。在「快速」設定下使用 96 CSS 像素顯示的短句會顯得俐落有力；同樣的句子在 32 CSS 像素搭配「慢速」時則會顯得沉穩從容。請透過觀察實際預覽來選擇預設，而非將標籤視為校準過的數值。
| 預設 | 循環時間 | 適用情境 |
|---|---|---|
| 慢 | 12 秒 | 較長的訊息、仔細閱讀、以無障礙為優先的設定 |
| 中 | 8 秒 | 一般用途的公告與活動提示 |
| 快 | 4 秒 | 應快速循環的簡短詞句 |
方向僅決定文字移動的路徑。由右至左會從右側開始橫幅，並向左側移動，呼應熟悉的跑馬燈慣例。由左至右則反轉該動作，當訊息需要從另一側邊緣進入，或對應非拉丁文的閱讀順序時相當實用。
| 大小 | CSS 像素 | 適用情境 |
|---|---|---|
| 小 | 32 | 精簡的橫幅與側邊欄配置 |
| 中 | 48 | 標準橫幅列 |
| 大 | 64 | 大多數的簡報與活動標示 |
| 特大 | 80 | 填滿整個空間的預覽 |
| 最大 | 96 | 拍照道具與大型空間的觀看需求 |
將選項維持固定——慢、中、快，以及 32、48、64、80、96——可讓控制項保持可預測性，並避免極端值破壞頁面。
暫停、繼續、重新開始與減少動畫
播放控制項刻意維持在很小的範疇內。「暫停」會將 CSS 動畫切換為 paused 來凍結目前的畫面；「繼續」會從停止處接續相同的動作；「重新開始」則會遞增渲染版本編號，讓全新的動畫實例從初始位置開始。在背景中不會有計時器圈、requestAnimationFrame 工作執行序、canvas 繪製週期或伺服器程序持續執行。
樣式表也會監聽瀏器的 prefers-reduced-motion 媒體查詢。若使用者已將其作業系統或瀏覽器設定為要求較少的動畫，橫幅會被強制維持在暫停狀態——使用者仍可閱讀靜止的訊息，並調整每項控制項。這項防護機制可避免網站層級的樣式選擇覆寫使用者的無障要求。
此小工具不會要求全螢幕權限。瀏器的全螢幕提示行為不一，可能在沒有直接手勢的情況下遭到封鎖，且可能隱藏重要的控制項。若要取得更大的檢視畫面，請調高文字大小、使用瀏覽器一般的全螢幕指令，或透過受信任的系統控制項來鏡像瀏覽器視窗。
實際用途與應保持靜止的內容
以瀏器渲染的幅最適合作為快速的視覺展示工具。常見的應用情境包括活動中的手持標示、工作時循環播放的桌面訊息、提示下一位講者的簡報提示、拍照道具，以及在不需要安裝完整招牌製作應用程式時的視覺注意力信號。
關鍵的安全指示應保持靜止且清楚可見。動態的裝飾幅不應作為緊急警告、無障礙通知、交通指引或任何其他高後果訊息的唯一管道。當觀看者需要抄寫姓名、代碼、地址或需要仔細謄寫的指示時，請暫停幅，讓文字保持靜止且清晰易讀。
為獲得最清晰的結果，請使用對比強烈且避免密集標點的簡短詞句。接著，請先確認所有需要接收訊息的人都能在所選的速度與距離下閱讀，再於觀眾面前實際使用。
相關閱讀：如何在 LED 風格橫幅上移動文字。