Created an epub-reader component that is functioning as intended, but encountering alignment issues with certain epub files. In some cases, the first page of the book is always aligned to the left side instead of the center. These alignments can be adjusted in a popup window where you can choose between "spread to one page" or "spread to two pages".
Example of dialog:
<mat-radio-group [(ngModel)]="epubTextOptions.selectedTwoPages" class="inline-button">
<mat-radio-button [value]="false" [checked]="!epubTextOptions.selectedTwoPages" class="inline-button">{{'reader.textOptions.dialog.onePage' | translate}}</mat-radio-button>
<mat-radio-button [value]="true" [checked]="epubTextOptions.selectedTwoPages" class="inline-button">{{'reader.textOptions.dialog.twoPages' | translate}}</mat-radio-button>
</mat-radio-group>
Typescript example:
export class MyClass implements OnInit {
book: Book;
rendition: Rendition;
private myMethod() {
this.rendition = this.book.renderTo(this.ePub.nativeElement, {
width: '100%',
height: '100%'
});
this.rendition.spread(this.epubTextOptions.selectedTwoPages ? 'always' : 'none');
}
}
HTML component:
<div id="epubContent" class="d-flex align-items-center" [style.height]="contentHeight + 'px'">
<app-button *ngIf="displayPrevPageButton() && !isMobileDevice()" (btnClick)="prevPage()"
btnClass="mat-icon-button epub-action"><span class="far fa-chevron-left"></span></app-button>
<div #ePub class="epub-container"></div>
<app-button *ngIf="displayNextPageButton() && !isMobileDevice()" (btnClick)="nextPage()"
btnClass="mat-icon-button epub-action"><span class="far fa-chevron-right"></span></app-button>
</div>
The functionality is based on examples from the epubjs library and customized for the reader. However, some epub files may not align correctly when selecting "one page" instead of center alignment.