MichaelPetre
commented
2 years ago Ok, after running this through the dev tools... the browser changes the injected css a bit before the extension saves it. "-epub-writing-mode" becomes " -webkit-writing-mode", which isn't listed in the supportedCss array. Adding it to the supportedCss array lets it go through, but it still gets mixed up.
body { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
The resulting CSS is still broken:
.AI0 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .BP1 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 32px / 51.2px "Times New Roman";line-height:51.2px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .ql2 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 24px / 38.4px "Times New Roman";line-height:38.4px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .Xn349 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 20px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .Tk354 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 18px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .mj357 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 16px "Times New Roman";line-height:16px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .yY360 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:8px / 4px "Times New Roman";line-height:4px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .Mp8104 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:13.3333px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .Wt24983 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(255, 255, 255);color:rgb(255, 255, 255);font:16px "Open Sans", Roboto, Arial, Helvetica, sans-serif;line-height:normal;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .un24984 {background-color:rgb(91, 0, 92);color:rgb(255, 255, 255);font:16px "Open Sans", Roboto, Arial, Helvetica, sans-serif;line-height:normal;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .pM24985 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(255, 255, 255);color:rgb(255, 255, 255);font:500 16px / 35px "Open Sans", Roboto, Arial, Helvetica, sans-serif;line-height:35px;list-style:outside none disc;padding:0px;text-align:center;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .fl24991 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(255, 255, 255);color:rgb(255, 255, 255);font:16px "Open Sans", Roboto, Arial, Helvetica, sans-serif;line-height:normal;list-style:outside none disc;padding:5px 0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .JJ24992 {background-color:rgb(255, 255, 255);border:0px none rgb(255, 255, 255);color:rgb(255, 255, 255);font:16px "Open Sans", Roboto, Arial, Helvetica, sans-serif;line-height:normal;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .cT24995 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(255, 255, 255);color:rgb(255, 255, 255);font:16px "Open Sans", Roboto, Arial, Helvetica, sans-serif;line-height:normal;list-style:outside none disc;padding:10px 0px 10px 5px;text-align:left;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .Mp24997 {background-color:rgba(0, 0, 0, 0);border:1px inset rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .IW25011 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 238);color:rgb(0, 0, 238);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .nu25019 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:40px 0px 0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .XG25020 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:left;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;} .jY25029 {background-color:rgb(48, 52, 62);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;}
The -epub-writing-mode/-webkit-writing-mode property has to be set in either the html or the body class for it to be rendered correctly.
The attributes writing-mode and -epub-writing-mode are filtered out by extractHtml.js in supportedCss. Adding them to the array lets them through to the combined css. However, there is still an unexpected behavior.
Adding the following css snippet to the custom styles:
html { -epub-writing-mode: vertical-rl; writing-mode: vertical-rl; }The resulting css in the epub is:.vj0 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .wY1 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 32px / 51.2px "Times New Roman";line-height:51.2px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .zV2 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 24px / 38.4px "Times New Roman";line-height:38.4px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .mv349 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 20px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .RM354 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:700 18px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .Jk357 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 16px "Times New Roman";line-height:16px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .lL360 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:8px / 4px "Times New Roman";line-height:4px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .ow8104 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:13.3333px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .xU24984 {background-color:rgba(0, 0, 0, 0);border:1px inset rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .Hj24998 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 238);color:rgb(0, 0, 238);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:start;writing-mode:vertical-rl;} .Zr25006 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:40px 0px 0px;text-align:start;writing-mode:vertical-rl;} .QM25007 {background-color:rgba(0, 0, 0, 0);border:0px none rgb(0, 0, 0);color:rgb(0, 0, 0);font:16px / 25.6px "Times New Roman";line-height:25.6px;list-style:outside none disc;padding:0px;text-align:left;writing-mode:vertical-rl;}The -epub-writing-mode somehow was still filtered out. This renders the whole book wrong, somehow collapsing a 56 chapters book into a 4 pages book. Manually adding back the -epub-writing-mode snippet to the top of that generated css fixes the book rendering.
html { -epub-writing-mode: vertical-rl; } ...