quran.com-frontend-next
quran.com-frontend-next copied to clipboard
Add new method for highlighting
Summary
Currently, we pass shouldShowSecondaryHighlight
to the <QuranWord />
component if we want to highlight a line or a verse. This approach results in weird gaps between the highlights. This PR uses a different approach:
In short, this approach involves using an absolute <div>
with the highlight color as the background. The complex logic above is used to position the highlight accurately behind the verse.
Screenshots
Before | After |
---|---|
![]() |
![]() |