EPUB appearance: Add 'Use original font' and 'Page width' options, increase zoom limit

src/common/components/reader-ui.js

@@ -201,6 +201,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 				// We always read the primaryViewState, but we write both view states
 				<EPUBAppearancePopup
 					params={state.primaryViewState.appearance}
+					enablePageWidth={state.primaryViewState.flowMode !== 'paginated' || state.primaryViewState.spreadMode === 0 }
 					onChange={props.onChangeEPUBAppearance}
 					onClose={() => props.onToggleEPUBAppearance({ open: false })}
 				/>

src/common/components/view-popup/epub-appearance-popup.js

@@ -5,7 +5,7 @@ import IconRevert from '../../../../res/icons/16/revert.svg';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { DEFAULT_EPUB_APPEARANCE as DEFAULTS } from '../../../dom/epub/defines';
 
-function EPUBAppearancePopup({ params, onChange, onClose }) {
+function EPUBAppearancePopup({ params, enablePageWidth, onChange, onClose }) {
 	const intl = useIntl();
 
 	if (!params) {
@@ -14,7 +14,12 @@ function EPUBAppearancePopup({ params, onChange, onClose }) {
 	}
 
 	function handleChange(event) {
-		params[event.target.name] = parseFloat(event.target.value);
+		if (event.target.type === 'checkbox') {
+			params[event.target.name] = event.target.checked;
+		}
+		else {
+			params[event.target.name] = parseFloat(event.target.value);
+		}
 		onChange(params);
 	}
 
@@ -91,6 +96,39 @@ function EPUBAppearancePopup({ params, onChange, onClose }) {
 						onClick={() => handleRevert('letterSpacing')}
 					><IconRevert/></button>
 				</div>
+
+				<div className="row">
+					<label htmlFor="page-width"><FormattedMessage id="pdfReader.epubAppearance.pageWidth"/></label>
+					<input
+						type="range"
+						id="page-width"
+						name="pageWidth"
+						value={params.pageWidth}
+						min="-1"
+						max="1"
+						step="1"
+						onChange={handleChange}
+						disabled={!enablePageWidth}
+					/>
+					<span className="value">{(params.pageWidth + 3) / 4 * 100}%</span>
+					<button
+						className={cx('toolbar-button', { hidden: params.pageWidth === DEFAULTS.pageWidth })}
+						aria-label={intl.formatMessage({ id: 'pdfReader.epubAppearance.pageWidth.revert' })}
+						onClick={() => handleRevert('pageWidth')}
+						disabled={!enablePageWidth}
+					><IconRevert/></button>
+				</div>
+
+				<div className="checkbox-row">
+					<input
+						type="checkbox"
+						id="use-original-font"
+						name="useOriginalFont"
+						checked={params.useOriginalFont}
+						onChange={handleChange}
+					/>
+					<label htmlFor="use-original-font"><FormattedMessage id="pdfReader.epubAppearance.useOriginalFont"/></label>
+				</div>
 			</div>
 		</div>
 	);

src/common/stylesheets/base/_base.scss

@@ -142,7 +142,7 @@ input[type="range"] {
 					0 0.25px 0.25px 0 rgba(0, 0, 0, 0.15);
 	}
 
-	&:active {
+	&:active:not(:disabled) {
 		&::-moz-range-thumb {
 			background: rgba(240, 240, 240, 1);
 		}

src/common/stylesheets/components/_view-popup.scss

@@ -118,6 +118,13 @@
 		}
 	}
 
+	.checkbox-row {
+		display: flex;
+		align-items: center;
+		gap: 4px 8px;
+		padding-block: 8px;
+	}
+
 	.hidden {
 		visibility: hidden;
 	}

src/dom/common/dom-view.tsx

@@ -53,7 +53,7 @@ import { History } from "../../common/lib/history";
 abstract class DOMView<State extends DOMViewState, Data> {
 	readonly MIN_SCALE = 0.6;
 
-	readonly MAX_SCALE = 1.5;
+	readonly MAX_SCALE = 1.8;
 
 	initializedPromise: Promise<void>;
 

src/dom/epub/defines.ts

@@ -1,4 +1,4 @@
-import { EPUBAppearance } from "./epub-view";
+import { EPUBAppearance, PageWidth } from "./epub-view";
 
 export const EPUB_LOCATION_BREAK_INTERVAL = 1800;
 
@@ -25,4 +25,6 @@ export const DEFAULT_EPUB_APPEARANCE: EPUBAppearance = Object.freeze({
 	lineHeight: 1.2,
 	wordSpacing: 0,
 	letterSpacing: 0,
+	pageWidth: PageWidth.Normal,
+	useOriginalFont: false,
 });

src/dom/epub/epub-view.ts

@@ -854,11 +854,36 @@ class EPUBView extends DOMView<EPUBViewState, EPUBViewData> {
 		this._handleViewUpdate();
 	}
 
-	setAppearance(appearance: EPUBAppearance) {
-		this._appearance = { ...appearance };
+	setAppearance(partialAppearance: Partial<EPUBAppearance>) {
+		let cfiBefore = this.flow?.startCFI;
+
+		let appearance = {
+			...DEFAULT_EPUB_APPEARANCE,
+			...partialAppearance
+		};
+		this._appearance = appearance;
 		this._iframeDocument.documentElement.style.setProperty('--content-line-height-adjust', String(appearance.lineHeight));
 		this._iframeDocument.documentElement.style.setProperty('--content-word-spacing-adjust', String(appearance.wordSpacing));
 		this._iframeDocument.documentElement.style.setProperty('--content-letter-spacing-adjust', String(appearance.letterSpacing));
+		this._iframeDocument.documentElement.classList.toggle('use-original-font', appearance.useOriginalFont);
+
+		let pageWidth;
+		switch (appearance.pageWidth) {
+			case PageWidth.Narrow:
+				pageWidth = 'narrow';
+				break;
+			case PageWidth.Normal:
+				pageWidth = 'normal';
+				break;
+			case PageWidth.Full:
+				pageWidth = 'full';
+				break;
+		}
+		this._iframeDocument.documentElement.dataset.pageWidth = pageWidth;
+
+		if (cfiBefore) {
+			this.navigate({ pageNumber: cfiBefore.toString() }, { skipHistory: true, behavior: 'auto' });
+		}
 		this._handleViewUpdate();
 	}
 
@@ -1105,13 +1130,21 @@ export interface EPUBViewState extends DOMViewState {
 	savedPageMapping?: string;
 	flowMode?: FlowMode;
 	spreadMode?: SpreadMode;
-	appearance?: EPUBAppearance;
+	appearance?: Partial<EPUBAppearance>;
 }
 
 export interface EPUBAppearance {
 	lineHeight: number;
 	wordSpacing: number;
 	letterSpacing: number;
+	pageWidth: PageWidth;
+	useOriginalFont: boolean;
+}
+
+export const enum PageWidth {
+	Narrow = -1,
+	Normal = 0,
+	Full = 1
 }
 
 export interface EPUBViewData {

src/dom/epub/stylesheets/_content.scss

@@ -109,7 +109,9 @@ replaced-body {
 	background: transparent !important;
 	color: inherit !important;
 
-	font-family: var(--content-font-family, "Georgia"), serif;
+	:root:not(.use-original-font) & {
+		font-family: var(--content-font-family, "Georgia", serif);
+	}
 	font-size: inherit !important;
 	line-height: var(--content-line-height) !important;
 	word-spacing: var(--content-word-spacing) !important;
@@ -143,9 +145,11 @@ replaced-body {
 		--content-line-height-compensation: 1.167;
 	}
 
-	p {
+	p, [role="paragraph"] {
 		// Really enforce some of our formatting choices on body paragraphs
-		font-family: var(--content-font-family, "Georgia"), serif !important;
+		:root:not(.use-original-font) & {
+			font-family: var(--content-font-family, "Georgia", serif);
+		}
 		line-height: var(--content-line-height) !important;
 		word-spacing: var(--content-word-spacing) !important;
 		letter-spacing: var(--content-letter-spacing) !important;

src/dom/epub/stylesheets/layout/_paginated.scss

@@ -41,23 +41,29 @@
 	overflow: hidden;
 	overscroll-behavior: none;
 
+	&.spread-mode-odd {
+		column-width: calc(50vw - 80px);
+		--media-max-width: calc(50vw - 80px);
+	}
+
 	&.spread-mode-none {
-		max-width: 800px;
-		column-width: 800px;
 		column-gap: 100vw;
 		--media-max-width: calc(100vw - 80px);
 	}
 
-	&.spread-mode-odd {
-		column-width: calc(50vw - 80px);
-		--media-max-width: calc(50vw - 80px);
+	:root[data-page-width="narrow"] &.spread-mode-none {
+		max-width: 650px;
+		column-width: 650px;
 	}
 
-	@media (max-width: 800px) {
+	:root[data-page-width="normal"] &.spread-mode-none {
 		max-width: 800px;
 		column-width: 800px;
-		column-gap: 100vw;
-		--media-max-width: calc(100vw - 80px);
+	}
+
+	:root[data-page-width="full"] &.spread-mode-none {
+		max-width: calc(100vw - 80px);
+		column-width: calc(100vw - 80px);
 	}
 
 	> .section-container {

src/dom/epub/stylesheets/layout/_scrolled.scss

@@ -8,7 +8,19 @@
 	> .section-container {
 		margin-inline: auto;
 		margin-bottom: 100px;
-		max-width: 800px;
+
+		:root[data-page-width="narrow"] & {
+			max-width: 650px;
+		}
+
+		:root[data-page-width="normal"] & {
+			max-width: 800px;
+		}
+
+		:root[data-page-width="full"] & {
+			max-width: 100%;
+		}
+
 		// Try some different permutations of the 'contain' values that we want,
 		// because Firefox, at least, seems to throw away the whole property
 		// when it sees an unknown value.

src/en-us.strings.js

@@ -160,9 +160,12 @@ export default {
 	'pdfReader.epubAppearance.lineHeight': 'Line height',
 	'pdfReader.epubAppearance.wordSpacing': 'Word spacing',
 	'pdfReader.epubAppearance.letterSpacing': 'Letter spacing',
+	'pdfReader.epubAppearance.pageWidth': 'Page width',
+	'pdfReader.epubAppearance.useOriginalFont': 'Use original font',
 	'pdfReader.epubAppearance.lineHeight.revert': 'Use default line height',
 	'pdfReader.epubAppearance.wordSpacing.revert': 'Use default word spacing',
 	'pdfReader.epubAppearance.letterSpacing.revert': 'Use default letter spacing',
+	'pdfReader.epubAppearance.pageWidth.revert': 'Use default page width',
 	'pdfReader.deleteAnnotation.singular': 'Are you sure you want to delete the selected annotation?',
 	'pdfReader.deleteAnnotation.plural': 'Are you sure you want to delete the selected annotations?',
 	'pdfReader.enterPassword': 'Enter the password to open this PDF file.',