Inconsistent Front and Back Cover Alignment in React-Pageflip: Issue and Improvement Suggestion #59
Description
📝 Issue Description:
In react-pageflip, achieving consistent center alignment for the front and back covers is extremely challenging. This becomes apparent when users interact with the flipbook:
When the book is closed, the front cover appears right-aligned instead of being centered.
Similarly, when navigating to the last page (the back cover), it becomes left-aligned, misaligned from the visual center.
In contrast, inner pages are correctly centered, offering a consistent and expected layout.
This misalignment breaks visual symmetry and detracts from the professional presentation of albums, portfolios, or publications — particularly for use cases like digital photo books or wedding albums, where layout consistency is essential.
📐 Expected Behavior:
When the flipbook is closed (at page 0), the front cover should appear centered horizontally, just like a real book.
When at the last page (back cover), it too should be centered.
The open state (inner pages) should remain untouched, as they are already displayed correctly.
⚙️ Cause of the Problem:
Internally, react-pageflip treats:
The front cover as a right-side single page
The back cover as a left-side single page
These pages are not centered within the container because of how the flipbook handles the book spine and page spreads. The front and back covers are rendered as single-sided views — which visually shifts them out of center alignment.