Multi-line captions not displaying on two lines (with fix)
See original GitHub issue- Issue does not already exist
- Issue observed on https://plyr.io => (Captions on website are not multi-line)
Expected behaviour
The multi-line captions should appear underneath each other, instead of rendering on one line.
Actual behaviour
All the browsers I tested display the captions on line (except Edge). See the fix below.
Note: Edge has no issues with the multi-line captions and display it perfectly due to rendering <br>
in vtt file.
Also, I noticed that when a caption dissapears or appears and you have scrolled down the page. Your page will go become smaller or larger See video: https://puu.sh/x0z96/b018f69d54.mp4
Environment
- Browsers: Chrome 59+, Firefox 41+, Opera 46.0.2597.57, IE11
- Operating System: Windows
- Version: 10
Players affected:
- HTML5 Video
- HTML5 Audio
- YouTube ==> Not tested
- Vimeo ==> Not tested
Steps to reproduce
- Add a multi-line caption file to any browser
Viewable at my site: https://dojocasts.com/en/lessen/bekijk/sully
Fixing
.plyr__captions span {
/* ... */
white-space: pre;
}
Before
After
Relevant links
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Closed Captions Multiline (Premiere Pro 14.9 and earlier)
Solved: I am trying to force long captions, or large font sizes onto 2 lines using PP2019. When enlarged: Is this possible?
Read more >Multi-line subtitles not displaying properly : r/TeaTV - Reddit
Just a bug/suggestion. Multi-line subtitles are not properly displayed. The newline character is skipped and everything is on one line and ...
Read more >Multi-line subtitles not displaying properly - Emby
This is related to subtitle. The subtitle I test was in .SRT format. Bug is when there are 2 lines, Emby try to...
Read more >how can i display multiple lines text caption in select tag?
Simply, You can do with the css which is below: <style> .test {word-wrap:break-word;} </style> <html><header><title></title></header> <body> ...
Read more >Side-by-side captions in minipage run too long, don't wrap to ...
I have two images which I want to place side-by-side in my article, but when I do, the captions don't wrap onto multiple...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
There is an issue with this fix. If a line is longer than the width the player, the overflowing part of it won’t be displayed.
This is the proper fix:
Needless to say, it should be merged into master ASAP.
I’ll add this into V3. Cheers 👍