UNPKG

43.4 kBHTMLView Raw
1<!DOCTYPE html>
2<html data-vivliostyle-paginated="true">
3 <head>
4 <meta charset="utf-8"/>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6 <meta name="apple-mobile-web-app-capable" content="yes"/>
7 <meta name="google" content="notranslate"/>
8 <title>Vivliostyle Viewer</title>
9
10 <!-- WICG Visual Viewport -->
11 <script src="https://wicg.github.io/visual-viewport/polyfill/visualViewport.js"></script>
12
13 <!-- MathJax -->
14 <script src="resources/mathjax-config.js"></script>
15 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML"></script>
16
17 <!--Marks Plugin; may not present -->
18 <!-- <script src="resources/marks-store-plugin.js" type="module"></script> -->
19
20 <!-- Viewer -->
21 <script src="js/vivliostyle-viewer.js"></script>
22 <link rel="icon" href="resources/vivliostyle-icon.png"/>
23 <link rel="stylesheet" href="css/vivliostyle-viewer.css"/>
24 <link rel="stylesheet" href="css/ui.arrows.css"/>
25 <link rel="stylesheet" href="css/ui.menu-bar.css"/>
26 <link rel="stylesheet" href="css/ui.message-dialog.css"/>
27 <link rel="stylesheet" href="css/ui.loading-overlay.css"/>
28 <link rel="stylesheet" href="css/ui.text-selection-menu.css"/>
29 <style id="vivliostyle-page-rules"></style>
30 </head>
31 <body data-vivliostyle-viewer-status="loading" data-bind="event: {keydown: handleKey}, attr: {'data-vivliostyle-viewer-status': viewer.state.status, 'aria-busy': viewer.state.status()=='loading'}">
32 <section id="vivliostyle-welcome" hidden data-bind="visible: !viewer.state.status(), attr: {hidden: viewer.state.status()?'':false, 'aria-hidden': viewer.state.status()?'true':'false', lang: t('UI_LNG')}, click: navigation.onclickViewport, swipePages: true">
33 <h1>Vivliostyle Viewer <small>(version:&nbsp;2.24.3)</small></h1>
34 <input id="vivliostyle-input-url" type="text" data-bind="textInput: viewer.inputUrl, attr: {placeholder: t('Input_')}"/>
35 <div id="vivliostyle-input-options">
36 <label data-bind="hidden: settingsPanel.isBookModeChangeDisabled"><input id="vivliostyle-book-mode" type="checkbox" data-bind="checked: settingsPanel.state.bookMode" />&nbsp;<b data-bind="text: t('Book_Mode')"></b>&emsp;</label>
37 <label data-bind="hidden: settingsPanel.isRenderAllPagesChangeDisabled"><input id="vivliostyle-render-all-pages" type="checkbox" data-bind="checked: settingsPanel.state.renderAllPages" />&nbsp;<b data-bind="text: t('Render_All_Pages')"></b>&emsp;</label>
38 <button id="vivliostyle-input-apply" type="button" data-bind="click: settingsPanel.apply, disable: !viewer.inputUrl(), text: t('Apply')"></button>
39 </div>
40 <p><strong data-bind="text: t('Supported_document_types_')"></strong></p>
41 <ul>
42 <li><span data-bind="text: t('HTML_documents_')"></span></li>
43 <li><span data-bind="text: t('Book_like_publications_')"></span> <span>(<b data-bind="text: t('Book_Mode')"></b>:&nbsp;On)</span>
44 <ul>
45 <li data-bind="text: t('Web_publications_')"></li>
46 <li data-bind="text: t('Unzipped_EPUB_')"></li>
47 </ul>
48 </li>
49 </ul>
50 <p data-bind="text: t('Notes_')"></p>
51 <ul>
52 <li data-bind="text: t('GitHub_')"></li>
53 <li data-bind="text: t('WARN_Mixed_Content_')"></li>
54 <li data-bind="text: t('WARN_Cross_Origin_')"></li>
55 </ul>
56 <p><strong data-bind="text: t('URL_parameter_options_')"></strong></p>
57 <ul>
58 <li><span>#<b>src</b>=&lt;<span data-bind="text: t('document_URL')"></span>&gt;</span></li>
59 <li><span>&amp;<b>bookMode</b>=[<b>true</b> | <b>false</b>]&emsp;(<b data-bind="text: t('Book_Mode')"></b>)</span>
60 <ul>
61 <li><b>true</b> <span data-bind="text: t('default_')"></span>: <span data-bind="text: t('for_Book_like_')"></span>
62 <ul>
63 <li data-bind="text: t('DESC_Book_Mode_')"></li>
64 </ul>
65 </li>
66 <li><b>false</b>: <span data-bind="text: t('for_single_HTML_')"></span></li>
67 </ul>
68 </li>
69 <li><span>&amp;<b>renderAllPages</b>=[<b>true</b> | <b>false</b>]&emsp;(<b data-bind="text: t('Render_All_Pages')"></b>)</span>
70 <ul>
71 <li><b>true</b> <span data-bind="text: t('default_')"></span>: <span data-bind="text: t('for_Print_')"></span></li>
72 <li><b>false</b>: <span data-bind="text: t('for_Read_')"></span></li>
73 </ul>
74 </li>
75 <li><span>&amp;<b>spread</b>=[<b>true</b> | <b>false</b> | <b>auto</b>]&emsp;(<b data-bind="text: t('Page_Spread_View')"></b>)</span>
76 <ul>
77 <li><b>true</b>: <span data-bind="text: t('Spread_view')"></span></li>
78 <li><b>false</b>: <span data-bind="text: t('Single_page_view')"></span></li>
79 <li><b>auto</b> <span data-bind="text: t('default_')"></span>: <span data-bind="text: t('Auto_spread_view')"></span></li>
80 </ul>
81 </li>
82 <li><span>&amp;<b>style</b>=&lt;<span data-bind="text: t('additional_stylesheet_URL')"></span>&gt;</span></li>
83 <li><span>&amp;<b>userStyle</b>=&lt;<span data-bind="text: t('user_stylesheet_URL')"></span>&gt;</span></li>
84 </ul>
85 <p><span data-bind="text: t('DESC_Options_also_1')"></span><a href="#" data-bind="click: settingsPanel.toggle"><img src="resources/vivliostyle-icon.png" width="16" height="16" alt="" />&nbsp;<span data-bind="text: t('Settings')"></span></a><span data-bind="text: t('DESC_Options_also_2')"></span></p>
86 <p data-bind="text: t('See_documentation_')"></p>
87 <ul>
88 <li><a data-bind="attr: {href: t('HREF_User_Guide')}, text: t('Vivliostyle_User_Guide')"></a></li>
89 </ul>
90 <p><a href="https://vivliostyle.org" data-bind="attr: {href: t('HREF_Vivlistyle_Home')}"><img src="resources/vivliostyle-logo.svg" alt="Vivliostyle"/></a></p>
91 <div data-bind="visible: location.hostname.includes('vercel')"><br/><a href="https://vercel.com/?utm_source=vivliostyle&amp;utm_campaign=oss"><img src="https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg" alt="Powered By Vercel"></a></div>
92 </section>
93 <div id="vivliostyle-viewer-viewport" data-vivliostyle-viewer-viewport="true" role="main" tabindex="0" data-bind="attr: {'data-vivliostyle-page-progression': viewer.state.pageProgression}, click: navigation.onclickViewport, swipePages: true, textSelection: true, event: {'wheel': navigation.onwheelViewport}"></div>
94 <span role="button" id="vivliostyle-page-navigation-left" aria-keyshortcuts="ArrowLeft" data-bind="click: navigation.navigateToLeft, css: {'vivliostyle-menu-enabled': !navigation.isNavigateToLeftDisabled()}, attr: {'aria-disabled': navigation.isNavigateToLeftDisabled, title: t('navigate_to_left')}"></span>
95 <span role="button" id="vivliostyle-page-navigation-right" aria-keyshortcuts="ArrowRight" data-bind="click: navigation.navigateToRight, css: {'vivliostyle-menu-enabled': !navigation.isNavigateToRightDisabled()}, attr: {'aria-disabled': navigation.isNavigateToRightDisabled, title: t('navigate_to_right')}"></span>
96 <div id="vivliostyle-page-slider-bar" data-bind="attr: {'dir': viewer.state.pageProgression}, css: {'vivliostyle-menu-disabled': navigation.hidePageSlider}">
97 <input aria-label="Page Slider" id="vivliostyle-page-slider" tabindex="-1" type="range" data-bind="value: navigation.pageSlider, valueUpdate: 'input', 'disable': navigation.isPageSliderDisabled, attr: {'max': navigation.pageSliderMax}, event: {'mouseup': navigation.onmouseupPageSlider, 'touchend': navigation.onmouseupPageSlider, 'wheel': navigation.onwheelPageSlider}" min="1"/>
98 </div>
99 <div id="vivliostyle-loading-overlay" hidden data-bind="visible: !isDebug, attr: {hidden: !viewer.state.status()?'':false}">
100 <div class="vivliostyle-loading-spinner"></div>
101 </div>
102 <div id="vivliostyle-text-selection-start-button" data-bind="visible: marksMenuStatus.startButtonOpened, clickOutside: marksMenuStatus.closeStartButton">
103 <button id="viv-marker-start-marker" data-bind="text: t('Highlight_')"></button>
104 </div>
105 <div role="dialog" id="vivliostyle-text-selection-edit-menu" data-bind="visible: marksMenuStatus.menuOpened, clickOutside: marksMenuStatus.applyEditing">
106 <div>
107 <button class="viv-marker-color yellow" data-bind="attr: {title: t('Marker_Yellow')}, css: {'selected-color': marksMenuStatus.currentEditingColor() == 'yellow' }, click: () => { marksMenuStatus.currentEditingColor('yellow') }"></button>
108 <button class="viv-marker-color red" data-bind="attr: {title: t('Marker_Red')}, css: { 'selected-color': marksMenuStatus.currentEditingColor() == 'red' }, click: () => { marksMenuStatus.currentEditingColor('red') }"></button>
109 <button class="viv-marker-color green" data-bind="attr: {title: t('Marker_Green')}, css: { 'selected-color': marksMenuStatus.currentEditingColor() == 'green' }, click: () => { marksMenuStatus.currentEditingColor('green') }"></button>
110 </div>
111 <div>
112 <textarea id="vivliostyle-memo-edit-area" rows="3" data-bind="textInput: marksMenuStatus.currentEditingMemo">
113 </textarea>
114 </div>
115 <div data-bind="visible: marksMenuStatus.cancellable">
116 <button id="viv-marker-selection-ok" data-bind="click: marksMenuStatus.applyEditing, text: t('OK')"></button>
117 <button id="viv-marker-selection-cancel" data-bind="click: marksMenuStatus.closeMenu, text: t('Cancel')"></button>
118 </div>
119 <div data-bind="visible: marksMenuStatus.deletable">
120 <button id="viv-marker-selection-delete" data-bind="click: marksMenuStatus.deleteCurrentEditing, text: t('Delete')"></button>
121 </div>
122 </div>
123 <!-- MENU BAR -->
124 <div role="toolbar" id="vivliostyle-menu-bar" data-bind="attr: {lang: t('UI_LNG')}">
125 <ul class="vivliostyle-menu" id="vivliostyle-menu_settings">
126 <li class="vivliostyle-menu-item" id="vivliostyle-menu-item_settings-toggle" data-bind="css: {'vivliostyle-menu-item_detail-opened': settingsPanel.opened, 'pinned': settingsPanel.pinned}"><span role="button" tabindex="0" class="vivliostyle-menu-icon-button" aria-keyshortcuts="S" data-bind="menuButton: true, click: settingsPanel.toggle, attr: {'aria-pressed': settingsPanel.opened()?'true':'false', 'aria-expanded': settingsPanel.opened()?'true':'false', title: t('TIP_Settings')}"></span>
127 <!-- MENU DETAIL -->
128 <div role="dialog" aria-label="Settings Panel" class="vivliostyle-menu-detail" tabindex="0" aria-hidden="true" data-bind="attr: {'aria-hidden': !settingsPanel.opened()?'true':'false'}">
129 <div class="vivliostyle-menu-detail-main">
130 <div class="vivliostyle-menu-detail-group" id="vivliostyle-settings_ui-language" data-bind="hidden: settingsPanel.isUILanguageChangeDisabled, attr: {title: t('TIP_UI_Language')}">
131 <select name="vivliostyle-settings_ui-language" aria-keyshortcuts="L" data-bind="foreach: Object.keys(i18n.options.resources), value: settingsPanel.uiLanguage">
132 <option data-bind="value: $data, text: $parent.t('UI_LNG', {lng: $data})">&nbsp;</option>
133 </select>
134 </div>
135 <details class="vivliostyle-menu-detail-group" id="vivliostyle-settings_page-view-and-rendering" open data-bind="hidden: settingsPanel.isPageViewModeChangeDisabled">
136 <summary class="vivliostyle-menu-detail-group-heading" aria-keyshortcuts="P"><span data-bind="text: t('Page_View_Mode')"></span></summary>
137 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_page-view-mode" aria-keyshortcuts="V">
138 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Page_Spread_View')"></legend>
139 <ul class="vivliostyle-menu-detail-group">
140 <li><label><input type="radio" name="vivliostyle-settings_page-view-mode" value="autoSpread" required data-bind="checked: settingsPanel.state.pageViewMode" /> <span data-bind="text: t('Auto')"></span></label></li>
141 <li><label><input type="radio" name="vivliostyle-settings_page-view-mode" value="singlePage" required data-bind="checked: settingsPanel.state.pageViewMode" /> <span data-bind="text: t('Single_page')"></span></label></li>
142 <li><label><input type="radio" name="vivliostyle-settings_page-view-mode" value="spread" required data-bind="checked: settingsPanel.state.pageViewMode" /> <span data-bind="text: t('Spread')"></span></label></li>
143 </ul>
144 </fieldset>
145 <fieldset class="vivliostyle-menu-detail-group vivliostyle-menu-detail-group-inline">
146 <div class="vivliostyle-menu-detail-group-heading" data-bind="hidden: settingsPanel.isBookModeChangeDisabled">
147 <label><input type="checkbox" name="vivliostyle-settings_book-mode" aria-keyshortcuts="B" data-bind="checked: settingsPanel.state.bookMode, disable: settingsPanel.isBookModeChangeDisabled" /> <span data-bind="text: t('Book_Mode'), attr: {title: t('TIP_Book_Mode')}"></span></label>
148 </div>
149 <div class="vivliostyle-menu-detail-group-heading" data-bind="hidden: settingsPanel.isRenderAllPagesChangeDisabled">
150 <label><input type="checkbox" name="vivliostyle-settings_render-all-pages" aria-keyshortcuts="A" data-bind="checked: settingsPanel.state.renderAllPages, disable: settingsPanel.isRenderAllPagesChangeDisabled" /> <span data-bind="text: t('Render_All_Pages'), attr: {title: t('TIP_Render_All_Pages')}"></span></label>
151 </div>
152 <div class="vivliostyle-menu-detail-group-heading" data-bind="hidden: settingsPanel.isRestoreViewChangeDisabled">
153 <label><input type="checkbox" name="vivliostyle-settings_restore-view" data-bind="checked: settingsPanel.state.restoreView, disable: settingsPanel.isRestoreViewChangeDisabled" /> <span data-bind="text: t('Restore_View'), attr: {title: t('TIP_Restore_View')}"></span></label>
154 </div>
155 </fieldset>
156 </details>
157 <details class="vivliostyle-menu-detail-group" id="vivliostyle-settings_custom-style" open data-bind="hidden: settingsPanel.isPageStyleChangeDisabled">
158 <summary class="vivliostyle-menu-detail-group-heading" aria-keyshortcuts="C"><span data-bind="text: t('Custom_Style_Settings')"></span></summary>
159 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_page-size" aria-keyshortcuts="Z">
160 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Page_Size')"></legend>
161 <ul class="vivliostyle-menu-detail-group">
162 <li><label><input type="radio" name="vivliostyle-settings_page-size" value="" required data-bind="checked: settingsPanel.state.pageStyle.pageSizeMode" /> <span data-bind="text: t('Default')"></span> <small data-bind="text: t('DESC_page_size_default')"></small></label></li>
163 <li><label><input type="radio" name="vivliostyle-settings_page-size" value="auto" required data-bind="checked: settingsPanel.state.pageStyle.pageSizeMode" /> <span data-bind="text: t('Auto')"></span> <small data-bind="text: t('DESC_page_size_auto')"></small></label></li>
164 <li>
165 <div>
166 <label><input type="radio" name="vivliostyle-settings_page-size" value="preset" required data-bind="checked: settingsPanel.state.pageStyle.pageSizeMode" /> <span data-bind="text: t('Preset')"></span></label>
167 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': settingsPanel.state.pageStyle.pageSizeMode()!='preset'}, click: ()=>{settingsPanel.state.pageStyle.pageSizeMode('preset');return true;}">
168 <select name="vivliostyle-settings_page-size_preset-select" data-bind="foreach: settingsPanel.state.pageStyle.PresetSize, value: settingsPanel.state.pageStyle.presetSize, attr: {tabindex: settingsPanel.state.pageStyle.pageSizeMode()=='preset'?0:-1}">
169 <option data-bind="value: $data, text: description">&nbsp;</option>
170 </select>&#x2002;
171 <label><input type="checkbox" name="vivliostyle-settings_page-size_preset-landscape" data-bind="checked: settingsPanel.state.pageStyle.isLandscape, disable: settingsPanel.state.pageStyle.pageSizeMode()!='preset'" /> <span data-bind="text: t('Landscape')"></span></label>
172 </span>
173 </div>
174 </li>
175 <li>
176 <div>
177 <label><input type="radio" name="vivliostyle-settings_page-size" value="custom" required data-bind="checked: settingsPanel.state.pageStyle.pageSizeMode" /> <span data-bind="text: t('Custom_size')"></span>:</label>
178 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': settingsPanel.state.pageStyle.pageSizeMode()!='custom'}, click: ()=>{settingsPanel.state.pageStyle.pageSizeMode('custom');return true;}"><label>‣ <small data-bind="text: t('Width')"></small>: <input type="text" autocomplete="off" name="vivliostyle-settings_page-size_custom-width" data-bind="value: settingsPanel.state.pageStyle.customWidth, attr: {tabindex: settingsPanel.state.pageStyle.pageSizeMode()=='custom'?0:-1}" /></label>
179 <label>‣ <small data-bind="text: t('Height')"></small>: <input type="text" autocomplete="off" name="vivliostyle-settings_page-size_custom-height" data-bind="value: settingsPanel.state.pageStyle.customHeight, attr: {tabindex: settingsPanel.state.pageStyle.pageSizeMode()=='custom'?0:-1}" /></label>
180 </span>
181 </div>
182 </li>
183 </ul>
184 </fieldset>
185 <details class="vivliostyle-menu-detail-group" id="vivliostyle-settings_custom-style_more" data-bind="hidden: settingsPanel.isPageStyleChangeDisabled">
186 <summary class="vivliostyle-menu-detail-group-heading" aria-keyshortcuts="M"><span data-bind="text: t('More_')"></span></summary>
187 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_crop-marks" aria-keyshortcuts="O">
188 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Crop_Marks')"></legend>
189 <ul class="vivliostyle-menu-detail-group">
190 <li>
191 <div>
192 <label><input type="checkbox" name="vivliostyle-settings_crop-marks-specified" data-bind="checked: settingsPanel.state.pageStyle.cropMarksSpecified" /> <span data-bind="text: t('Crop_marks')"></span>:</label>
193 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': !settingsPanel.state.pageStyle.cropMarksSpecified()}, click: ()=>{settingsPanel.state.pageStyle.cropMarksSpecified(true);return true;}"><input type="text" autocomplete="off" name="vivliostyle-settings_crop-marks" data-bind="value: settingsPanel.state.pageStyle.cropMarks, attr: {tabindex: settingsPanel.state.pageStyle.cropMarksSpecified()?0:-1}" /></span>
194 </div>
195 <ul class="vivliostyle-menu-detail-group">
196 <li>
197 <div>
198 <label><input type="checkbox" name="vivliostyle-settings_bleed-specified" data-bind="checked: settingsPanel.state.pageStyle.bleedSpecified" /> <span data-bind="text: t('Bleed')"></span>:</label>
199 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': !settingsPanel.state.pageStyle.bleedSpecified()}, click: ()=>{settingsPanel.state.pageStyle.bleedSpecified(true);return true;}"><input type="text" autocomplete="off" name="vivliostyle-settings_bleed" data-bind="value: settingsPanel.state.pageStyle.bleed, attr: {tabindex: settingsPanel.state.pageStyle.bleedSpecified()?0:-1}" /></span>
200 </div>
201 </li>
202 <li>
203 <div>
204 <label><input type="checkbox" name="vivliostyle-settings_crop-offset-specified" data-bind="checked: settingsPanel.state.pageStyle.cropOffsetSpecified" /> <span data-bind="text: t('Crop_offset')"></span>:</label>
205 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': !settingsPanel.state.pageStyle.cropOffsetSpecified()}, click: ()=>{settingsPanel.state.pageStyle.cropOffsetSpecified(true);return true;}"><input type="text" autocomplete="off" name="vivliostyle-settings_crop-offset" data-bind="value: settingsPanel.state.pageStyle.cropOffset, attr: {tabindex: settingsPanel.state.pageStyle.cropOffsetSpecified()?0:-1}" /></span>
206 </div>
207 </li>
208 </ul>
209 </li>
210 </ul>
211 </fieldset>
212 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_page-margin" aria-keyshortcuts="G">
213 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Page_Margins')"></legend>
214 <ul class="vivliostyle-menu-detail-group">
215 <li><label><input type="radio" name="vivliostyle-settings_page-margin" value="" required data-bind="checked: settingsPanel.state.pageStyle.pageMarginMode" /> <span data-bind="text: t('Default')"></span> <small data-bind="text: t('DESC_page_margin_default')"></small></label></li>
216 <li><label><input type="radio" name="vivliostyle-settings_page-margin" value="0" required data-bind="checked: settingsPanel.state.pageStyle.pageMarginMode" /> <span data-bind="text: t('Set_page_margin_to_0')"></span></label></li>
217 <li>
218 <div>
219 <label><input type="radio" name="vivliostyle-settings_page-margin" value="custom" required data-bind="checked: settingsPanel.state.pageStyle.pageMarginMode" /> <span data-bind="text: t('Custom_margin')"></span>:</label>
220 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': settingsPanel.state.pageStyle.pageMarginMode()!='custom'}, click: ()=>{settingsPanel.state.pageStyle.pageMarginMode('custom');return true;}"><label>‣ <small data-bind="text: t('Top_Right_Bottom_Left')"></small>: <input type="text" autocomplete="off" name="vivliostyle-settings_page-margin_custom" data-bind="value: settingsPanel.state.pageStyle.customMargin, attr: {tabindex: settingsPanel.state.pageStyle.pageMarginMode()=='custom'?0:-1}" /></label></span>
221 </div>
222 </li>
223 <li><label><input type="checkbox" name="vivliostyle-settings_first-page-margin-zero" data-bind="checked: settingsPanel.state.pageStyle.firstPageMarginZero" /> <span data-bind="text: t('Set_first_page_margin_to_0')"></span></label>
224 <li><label><input type="checkbox" name="vivliostyle-settings_force-html-body-margin-zero" data-bind="checked: settingsPanel.state.pageStyle.forceHtmlBodyMarginZero" /> <span data-bind="text: t('Force_html_body_margin_to_0')"></span></label>
225 </ul>
226 </fieldset>
227 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_page-breaks" aria-keyshortcuts="K">
228 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Page_Breaks')"></legend>
229 <ul class="vivliostyle-menu-detail-group">
230 <li><label><input type="radio" name="vivliostyle-settings_widows-orphans" value="" required data-bind="checked: settingsPanel.state.pageStyle.widowsOrphans" /> <span data-bind="text: t('Default_widows_orphans_control')"></span></label></li>
231 <li><label><input type="radio" name="vivliostyle-settings_widows-orphans" value="1" required data-bind="checked: settingsPanel.state.pageStyle.widowsOrphans" /> <span data-bind="text: t('Allow_widows_and_orphans')"></span></label></li>
232 <li><label><input type="radio" name="vivliostyle-settings_widows-orphans" value="999" required data-bind="checked: settingsPanel.state.pageStyle.widowsOrphans" /> <span data-bind="text: t('Avoid_page_break_inside_paragraph')"></span></label></li>
233 </ul>
234 </fieldset>
235 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_images" aria-keyshortcuts="I">
236 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Images')"></legend>
237 <ul class="vivliostyle-menu-detail-group">
238 <li><label><input type="checkbox" name="vivliostyle-settings_image-max-size-to-fit-page" data-bind="checked: settingsPanel.state.pageStyle.imageMaxSizeToFitPage" /> <span data-bind="text: t('Set_image_max_size_to_fit_page')"></span></label></li>
239 <li>
240 <ul class="vivliostyle-menu-detail-group">
241 <li><label><input type="checkbox" name="vivliostyle-settings_image-keep-aspect-ratio" data-bind="checked: settingsPanel.state.pageStyle.imageKeepAspectRatio" /> <span data-bind="text: t('Keep_aspect_ratio')"></span></label></li>
242 </ul>
243 </li>
244 </ul>
245 </fieldset>
246 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_text" aria-keyshortcuts="T">
247 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Text')"></legend>
248 <ul class="vivliostyle-menu-detail-group">
249 <li><label><span data-bind="text: t('Font_size')"></span>: <input type="text" inputmode="numeric" autocomplete="off" name="vivliostyle-settings_viewer-font-size" data-bind="value: settingsPanel.state.pageStyle.viewerFontSizePercent" />%</label>
250 <ul class="vivliostyle-menu-detail-group">
251 <li>
252 <div>
253 <label><input type="checkbox" name="vivliostyle-settings_base-font-size-specified" data-bind="checked: settingsPanel.state.pageStyle.baseFontSizeSpecified" /> <span data-bind="text: t('Base_font_size')"></span>:</label>
254 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': !settingsPanel.state.pageStyle.baseFontSizeSpecified()}, click: ()=>{settingsPanel.state.pageStyle.baseFontSizeSpecified(true);return true;}"><input type="text" autocomplete="off" name="vivliostyle-settings_base-font-size" data-bind="value: settingsPanel.state.pageStyle.baseFontSize, attr: {tabindex: settingsPanel.state.pageStyle.baseFontSizeSpecified()?0:-1}" /></span>
255 </div>
256 </li>
257 </ul>
258 </li>
259 <li>
260 <div>
261 <label><input type="checkbox" name="vivliostyle-settings_base-line-height-specified" data-bind="checked: settingsPanel.state.pageStyle.baseLineHeightSpecified" /> <span data-bind="text: t('Base_line_height')"></span>:</label>
262 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': !settingsPanel.state.pageStyle.baseLineHeightSpecified()}, click: ()=>{settingsPanel.state.pageStyle.baseLineHeightSpecified(true);return true;}"><input type="text" autocomplete="off" name="vivliostyle-settings_base-line-height" data-bind="value: settingsPanel.state.pageStyle.baseLineHeight, attr: {tabindex: settingsPanel.state.pageStyle.baseLineHeightSpecified()?0:-1}" /></span>
263 </div>
264 </li>
265 <li>
266 <div>
267 <label><input type="checkbox" name="vivliostyle-settings_base-font-family-specified" data-bind="checked: settingsPanel.state.pageStyle.baseFontFamilySpecified" /> <span data-bind="text: t('Base_font_family')"></span>:</label>
268 <span class="vivliostyle-menu-disabled" data-bind="css: {'vivliostyle-menu-disabled': !settingsPanel.state.pageStyle.baseFontFamilySpecified()}, click: ()=>{settingsPanel.state.pageStyle.baseFontFamilySpecified(true);return true;}"><input type="text" name="vivliostyle-settings_base-font-family" data-bind="value: settingsPanel.state.pageStyle.baseFontFamily, attr: {tabindex: settingsPanel.state.pageStyle.baseFontFamilySpecified()?0:-1}" /></span>
269 </div>
270 </li>
271 </ul>
272 </fieldset>
273 <fieldset class="vivliostyle-menu-detail-group" id="vivliostyle-settings_priority" aria-keyshortcuts="Y">
274 <legend class="vivliostyle-menu-detail-group-heading" data-bind="text: t('Custom_Style_Priority')"></legend>
275 <ul class="vivliostyle-menu-detail-group">
276 <li><label><input type="checkbox" name="vivliostyle-settings_set-as-custom-style" data-bind="checked: settingsPanel.state.pageStyle.customStyleAsUserStyle" /> <span data-bind="text: t('Set_as_user_stylesheet')"></span> <small data-bind="text: t('DESC_user_stylesheet')"></small></label></li>
277 <li><label><input type="checkbox" name="vivliostyle-settings_override-document-stylesheets" data-bind="checked: settingsPanel.state.pageStyle.allImportant" /> <span data-bind="text: t('Force_override_document_style')"></span> <small data-bind="text: t('important_')"></small></label></li>
278 </ul>
279 </fieldset>
280 </details>
281 <details class="vivliostyle-menu-detail-group" id="vivliostyle-settings_edit-css">
282 <summary class="vivliostyle-menu-detail-group-heading"><span data-bind="text: t('Edit_CSS')"></span></summary>
283 <div><small data-bind="text: t('Dont_edit_')"></small></div>
284 <textarea name="vivliostyle-settings_edit-css" autocomplete="off" aria-keyshortcuts="E" rows="10" data-bind="value: settingsPanel.state.pageStyle.cssText"></textarea>
285 </details>
286 <details class="vivliostyle-menu-detail-group" id="vivliostyle-settings_reset-custom-style">
287 <summary class="vivliostyle-menu-detail-group-heading"><span data-bind="text: t('Reset_Custom_Style')"></span></summary>
288 <ul class="vivliostyle-menu-detail-group">
289 <li>
290 <label><input type="checkbox" name="vivliostyle-settings_reset-custom-style" aria-keyshortcuts="R" data-bind="checked: settingsPanel.resetCustomStyle" /> <span data-bind="text: t('Reset_all_to_default')"></span></label>
291 </li>
292 </ul>
293 </details>
294 </details>
295 <div class="vivliostyle-menu-detail-group vivliostyle-menu-detail-group-buttons vivliostyle-menu-detail-group-inline" id="vivliostyle-settings_apply-or-cancel">
296 <div><button type="button" class="vivliostyle-menu-button vivliostyle-menu-button-positive" id="vivliostyle-menu-button_apply" aria-keyshortcuts="Enter" data-bind="menuButton: true, click: settingsPanel.apply, text: t('Apply')"></button></div>
297 <div><button type="button" class="vivliostyle-menu-button vivliostyle-menu-button-negative" id="vivliostyle-menu-button_cancel" aria-keyshortcuts="Escape" data-bind="menuButton: true, click: settingsPanel.cancel, text: t('Cancel')"></button></div>
298 </div>
299 </div>
300 <aside class="vivliostyle-menu-detail-aside">
301 <div><small>Powered by</small> <a href="https://vivliostyle.org"><strong>Vivliostyle</strong></a> </div>
302 <div class="version"><small>(<span>core+viewer: 2.24.3</span>)</small></div>
303 </aside>
304 </div>
305 </li>
306 </ul>
307 <ul class="vivliostyle-menu" id="vivliostyle-menu_toc-find" data-bind="visible: !navigation.hideTOCNavigation||!navigation.hideFind">
308 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_toc-toggle" data-bind="click: navigation.toggleTOC, css: {'vivliostyle-menu-disabled': navigation.isTOCToggleDisabled, 'on': viewer.tocVisible, 'pinned': viewer.tocPinned}, visible: !navigation.hideTOCNavigation"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="T" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isTOCToggleDisabled, 'aria-pressed': viewer.tocVisible()?'true':'false', 'tabindex': !navigation.isTOCToggleDisabled()?'0':false, title: t('TIP_ToC')}"></span></li>
309 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_marker-toggle" data-bind="css: {'vivliostyle-menu-disabled': navigation.isMarkerToggleDisabled, 'on': viewerOptions.enableMarker, 'pinned': marksBox.pinned}, visible: !navigation.hideMarker"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="M" data-bind="click: navigation.toggleMarker, menuButton: true, attr: {'aria-disabled': navigation.isMarkerToggleDisabled, 'aria-pressed': viewerOptions.enableMarker()?'true':'false', 'tabindex': !navigation.isTOCToggleDisabled()?'0':false, title: t('TIP_Marker')}"></span>
310 <details role="dialog" id="vivliostyle-marks-box" hidden aria-hidden="true" data-bind="attr: {hidden: !marksBox.hasMarks()?'':false, 'aria-hidden': !marksBox.hasMarks()?'true':'false'}">
311 <summary data-bind="text: t('Marks_and_Memos')"></summary>
312 <div class="viv-marker-remove-all">
313 <button data-bind="click: marksBox.removeAllMarks, text: t('Remove_All')"></button>
314 </div>
315 <ol class="viv-marker-list" data-bind="foreach: marksBox.list">
316 <li data-bind="attr: {'data-viv-marker-color': color}">
317 <a href="#" class="viv-marker-text" draggable="false" data-bind="text: markedText, click: $parent.marksBox.navigateToMark"></a>
318 <div class="viv-marker-edit">
319 <button class="viv-marker-remove" data-bind="click: $parent.marksBox.removeOneMark, attr: {title: $parent.t('Remove')}"></button>
320 <textarea data-bind="textInput: memo, event: {blur: $parent.marksBox.updateActualMark}, attr: {title: $parent.t('Memo')}"></textarea>
321 </div>
322 </li>
323 </ol>
324 </details>
325 </li>
326 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_find-toggle" data-bind="css: {'vivliostyle-menu-disabled': navigation.isFindBoxDisabled, 'on': findBox.opened}, visible: !navigation.hideFind"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="Ctrl+F Meta+F" data-bind="click: findBox.toggle, menuButton: true, attr: {'aria-disabled': navigation.isFindBoxDisabled, 'aria-pressed': findBox.opened()?'true':'false', 'tabindex': !navigation.isFindBoxDisabled()?'0':false, title: t('TIP_Find')}"></span>
327 <div id="vivliostyle-menu-find-box" aria-hidden="true" data-bind="attr: {'aria-hidden': !findBox.opened()?'true':'false'}">
328 <input id="vivliostyle-find-box" data-bind="textInput: findBox.text, attr: {'aria-disabled': navigation.isFindBoxDisabled, placeholder: t('Find')}" type="text"/>
329 <span id="vivliostyle-find-status" data-bind="text: findBox.status"></span>
330 <span id="vivliostyle-find-previous" role="button" aria-keyshortcuts="Shift+Enter" data-bind="menuButton: true, click: findBox.findPrevious, attr: {title: t('TIP_Find_Previous')}"></span>
331 <span id="vivliostyle-find-next" role="button" aria-keyshortcuts="Enter" data-bind="menuButton: true, click: findBox.findNext, attr: {title: t('TIP_Find_Next')}"></span>
332 </div>
333 </li>
334 </ul>
335 <ul class="vivliostyle-menu" id="vivliostyle-menu_move" data-bind="visible: !navigation.hidePageNavigation">
336 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_move-first" data-bind="click: navigation.navigateToFirst, css: {'vivliostyle-menu-disabled': navigation.isNavigateToFirstDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="Home Meta+ArrowUp" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isNavigateToFirstDisabled, title: t('TIP_First_Page')}"></span></li>
337 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_move-previous" data-bind="click: navigation.navigateToPrevious, css: {'vivliostyle-menu-disabled': navigation.isNavigateToPreviousDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="ArrowUp PageUp" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isNavigateToPreviousDisabled, title: t('TIP_Previous_Page')}"></span></li>
338 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_move-next" data-bind="click: navigation.navigateToNext, css: {'vivliostyle-menu-disabled': navigation.isNavigateToNextDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="ArrowDown PageDown" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isNavigateToNextDisabled, title: t('TIP_Next_Page')}"></span></li>
339 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_move-last" data-bind="click: navigation.navigateToLast, css: {'vivliostyle-menu-disabled': navigation.isNavigateToLastDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="End Meta+ArrowDown" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isNavigateToLastDisabled, title: t('TIP_Last_Page')}"></span></li>
340 <li class="vivliostyle-menu-item" id="vivliostyle-menu-item_page-number" data-bind="css: {'vivliostyle-menu-disabled': navigation.isPageNumberDisabled}"><input aria-label="Page number" id="vivliostyle-page-number" aria-keyshortcuts="G" data-bind="value: navigation.pageNumber, attr: {'aria-disabled': navigation.isPageNumberDisabled, title: t('TIP_Go_to_Page')}, event: {'focus': navigation.onfocusPageNumber,'wheel': navigation.onwheelPageSlider}" type="text" inputmode="numeric" autocomplete="off"/></li>
341 <li class="vivliostyle-menu-item" id="vivliostyle-menu-item_total-pages" data-bind="css: {'vivliostyle-menu-disabled': navigation.isPageNumberDisabled}"><span id="vivliostyle-total-pages" tabindex="0" data-bind="text: navigation.totalPages, attr: {'aria-label': t('Total_pages')}"></span></li>
342 </ul>
343 <ul class="vivliostyle-menu" id="vivliostyle-menu_text-size" data-bind="visible: !navigation.hideFontSizeChange">
344 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_text-size-smaller" data-bind="click: navigation.decreaseFontSize, css: {'vivliostyle-menu-disabled': navigation.isDecreaseFontSizeDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="-" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isDecreaseFontSizeDisabled, title: t('TIP_Text_Smaller')}"></span></li>
345 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_text-size-larger" data-bind="click: navigation.increaseFontSize, css: {'vivliostyle-menu-disabled': navigation.isIncreaseFontSizeDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="Plus" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isIncreaseFontSizeDisabled, title: t('TIP_Text_Larger')}"></span></li>
346 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_text-size-default" data-bind="click: navigation.defaultFontSize, css: {'vivliostyle-menu-disabled': navigation.isDefaultFontSizeDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="0" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isDefaultFontSizeDisabled, title: t('TIP_Text_Default_Size')}"></span></li>
347 </ul>
348 <ul class="vivliostyle-menu" id="vivliostyle-menu_zoom" data-bind="visible: !navigation.hideZoom">
349 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_zoom-out" data-bind="click: navigation.zoomOut, css: {'vivliostyle-menu-disabled': navigation.isZoomOutDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="O" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isZoomOutDisabled, title: t('TIP_Zoom_Out')}"></span></li>
350 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_zoom-in" data-bind="click: navigation.zoomIn, css: {'vivliostyle-menu-disabled': navigation.isZoomInDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="I" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isZoomInDisabled, title: t('TIP_Zoom_In')}"></span></li>
351 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_zoom-to-actual-size" data-bind="click: navigation.zoomToActualSize, css: {'vivliostyle-menu-disabled': navigation.isZoomToActualSizeDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="1" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isZoomToActualSizeDisabled, title: t('TIP_Zoom_Actual_Size')}"></span></li>
352 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_zoom-fit-to-screen" data-bind="click: navigation.toggleFitToScreen, css: {'vivliostyle-menu-disabled': navigation.isToggleFitToScreenDisabled, 'on': navigation.fitToScreen}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="F" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isToggleFitToScreenDisabled, 'aria-pressed': navigation.fitToScreen()?'true':'false', title: t('TIP_Zoom_Fit_to_Screen')}"></span></li>
353 </ul>
354 <ul class="vivliostyle-menu" id="vivliostyle-menu_print" data-bind="visible: !navigation.hidePrint">
355 <li class="vivliostyle-menu-item vivliostyle-menu-disabled" id="vivliostyle-menu-item_print" data-bind="click: navigation.print, css: {'vivliostyle-menu-disabled': navigation.isPrintDisabled}"><span role="button" class="vivliostyle-menu-icon-button" aria-keyshortcuts="P" data-bind="menuButton: true, attr: {'aria-disabled': navigation.isPrintDisabled, title: t('TIP_Print')}"></span></li>
356 </ul>
357 </div>
358
359 <!-- MESSAGE DIALOG -->
360 <div role="alertdialog" aria-label="Error messages" id="vivliostyle-message-dialog" data-bind="foreach: messageDialog.list, css: {'vivliostyle-message-dialog-shown': messageDialog.visible}, attr: {'aria-hidden': !messageDialog.visible()?'true':'false'}">
361 <div class="vivliostyle-message">
362 <p data-bind="css: type, text: $parent.messageDialog.getDisplayMessage(content)"></p>
363 </div>
364 </div>
365 </body>
366</html>