YouTube のコメントをドラクエ風に表示する

Requirements

• Chat v2.0 Style Generator
  • Use default css.
• PixelMplus
  • PixelMplus10-Regular.ttf Must be installed.

Additional CSS

/* Additional CSS. */
yt-live-chat-text-message-renderer #author-name,
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  font-family: "PixelMplus10";
}
yt-live-chat-item-list-renderer #item-scroller {
    border: 2px solid #fff;
    border-radius: 4px;
}
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 1s;
  animation-fill-mode: both;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

Probrem

• Multiline text.

It's like this

Caution: This image is applying a mosaic.

イメージ画像