The double quotation marks in quote blocks overlap the text on mobile devices #1994

New Issue

OVERLORD · 2026-02-05T02:25:26+03:00

OVERLORD commented

2026-02-05 02:25:26 +03:00

Originally created by @MFYDev on GitHub (Dec 26, 2020).

Describe the bug
When using Bookstack 0.30.7, and setting default editor as mardown.

Then the quote block cannot display normally on mobile device, because the double quotation marks overlap the text.

Steps To Reproduce
Steps to reproduce the behavior:

create a new page in the book.
using > to create a quote block and fill it with some characters.
viewing it on your mobile device. (Mine is Android Chrome)
See error

Expected behavior
the double quotation marks should not overlap the text.

Screenshots

Your Configuration (please complete the following information):

Exact BookStack Version (Found in settings):0.30.7
PHP Version:7.4
Hosting Method (Nginx/Apache/Docker): Nginx

Originally created by @MFYDev on GitHub (Dec 26, 2020). **Describe the bug** When using Bookstack 0.30.7, and setting default editor as mardown. Then the quote block cannot display normally on mobile device, because the double quotation marks overlap the text. **Steps To Reproduce** Steps to reproduce the behavior: 1. create a new page in the book. 2. using `>` to create a quote block and fill it with some characters. 3. viewing it on your mobile device. (Mine is Android Chrome) 4. See error **Expected behavior** the double quotation marks should not overlap the text. **Screenshots** ![error](https://user-images.githubusercontent.com/53750381/103154457-4a4a0000-47d2-11eb-8e28-7932f1cfed2e.jpg) **Your Configuration (please complete the following information):** - Exact BookStack Version (Found in settings):0.30.7 - PHP Version:7.4 - Hosting Method (Nginx/Apache/Docker): Nginx

OVERLORD closed this issue

2026-02-05 02:25:30 +03:00

OVERLORD commented

2026-02-05 02:25:32 +03:00

@ssddanbrown commented on GitHub (Jan 2, 2021):

Thanks for reporting @MFYDev.

I'm having trouble reproducing this, Can you confirm the following:

What device is in use? Just so I can get details of the browser viewport size.
Have you made any customizations to your BookStack instance? The quote mark looks different to what I see by default on chrome/firefox.

@ssddanbrown commented on GitHub (Jan 2, 2021): Thanks for reporting @MFYDev. I'm having trouble reproducing this, Can you confirm the following: * What device is in use? Just so I can get details of the browser viewport size. * Have you made any customizations to your BookStack instance? The quote mark looks different to what I see by default on chrome/firefox.

OVERLORD commented

2026-02-05 02:25:35 +03:00

@MFYDev commented on GitHub (Jan 2, 2021):

@ssddanbrown I am using Mi 10 Ultra and here is the parameters of my device.

I never do any customization on this thing. I just add mathjax to the header, but this has nothing to do with the quote marks. Maybe it is because of the Chinese characters?

@MFYDev commented on GitHub (Jan 2, 2021): @ssddanbrown I am using Mi 10 Ultra and here is the parameters of my device. ![Screenshot_2021-01-02-10-08-01-079_com android settings](https://user-images.githubusercontent.com/53750381/103449384-9d481980-4ce2-11eb-88d4-1c2b6e8aaeb5.jpg) I never do any customization on this thing. I just add mathjax to the header, but this has nothing to do with the quote marks. Maybe it is because of the Chinese characters?

OVERLORD commented

2026-02-05 02:25:39 +03:00

@ssddanbrown commented on GitHub (Jan 2, 2021):

Thanks for confirming @MFYDev, Yeah, May be due to the characters or maybe the default font active on the phone. I do have a xiomi device somewhere, might give it a test on that.

If possible, it would be ideal if you could let me know if you see the same thing on the BookStack demo site on your device. There's a quote block towards the bottom of this page:
https://demo.bookstackapp.com/books/bookstack-user-guide/page/examples-of-different-content

@ssddanbrown commented on GitHub (Jan 2, 2021): Thanks for confirming @MFYDev, Yeah, May be due to the characters or maybe the default font active on the phone. I do have a xiomi device somewhere, might give it a test on that. If possible, it would be ideal if you could let me know if you see the same thing on the BookStack demo site on your device. There's a quote block towards the bottom of this page: https://demo.bookstackapp.com/books/bookstack-user-guide/page/examples-of-different-content

OVERLORD commented

2026-02-05 02:25:41 +03:00

@MFYDev commented on GitHub (Jan 2, 2021):

Thank you so much for the efficient support @ssddanbrown, and I can confirm this issue happens on your demo site too, here is the screenshot in the following:

BTW, I found another problem at the same moment, the table appears incomplete on the mobile device and cannot be dragged,
here is the screenshot:

I am using the lastest version Andorid Chrome which was downloaded from Google Play.

@MFYDev commented on GitHub (Jan 2, 2021): Thank you so much for the efficient support @ssddanbrown, and I can confirm this issue happens on your demo site too, here is the screenshot in the following: ![image](https://user-images.githubusercontent.com/53750381/103449912-e5b70580-4ce9-11eb-9017-1c4c2ee75668.png) BTW, I found another problem at the same moment, the table appears incomplete on the mobile device and cannot be dragged, here is the screenshot: ![image](https://user-images.githubusercontent.com/53750381/103449925-0da66900-4cea-11eb-8daf-40b5b87b5b44.png) I am using the lastest version Andorid Chrome which was downloaded from Google Play.

OVERLORD commented

2026-02-05 02:25:44 +03:00

@MFYDev commented on GitHub (Jan 2, 2021):

Honestly, I suggest to remove the quote marks. Because sometimes, we do not use quote blocks just to quote somebody's words. We also use this block to highlight something, then, displaying the quote mark will be a little bit weird.

I know you want this block more pretty, but this thing is not always the best in markdown editor.

Maybe one of the solutions is adding a switch to control the quote mark in the block displays or not?

I do not know, just wanna express my perspective.

@MFYDev commented on GitHub (Jan 2, 2021): Honestly, I suggest to remove the quote marks. Because sometimes, we do not use quote blocks just to quote somebody's words. We also use this block to highlight something, then, displaying the quote mark will be a little bit weird. I know you want this block more pretty, but this thing is not always the best in markdown editor. Maybe one of the solutions is adding a switch to control the quote mark in the block displays or not? I do not know, just wanna express my perspective.

OVERLORD commented

2026-02-05 02:25:46 +03:00

@MFYDev commented on GitHub (Apr 1, 2021):

@ssddanbrown Please do not forget this issue sir.

@MFYDev commented on GitHub (Apr 1, 2021): @ssddanbrown Please do not forget this issue sir.

OVERLORD commented

2026-02-05 02:25:48 +03:00

@tcsi-github commented on GitHub (Apr 18, 2022):

I realize this is about a year old.... however I feel the same way. I would like to see the double quote go away. Rarely are we using it to denote an actual quote but more of sectioning something to be on it's own.

@tcsi-github commented on GitHub (Apr 18, 2022): I realize this is about a year old.... however I feel the same way. I would like to see the double quote go away. Rarely are we using it to denote an actual quote but more of sectioning something to be on it's own.

OVERLORD commented

2026-02-05 02:25:51 +03:00

@ssddanbrown commented on GitHub (Apr 18, 2022):

@tcsi-github I wouldn't really look to change the default style based on people using blockquotes against their intended purpose.
You can override the styles on your instance if desired using the "Custom HTML Head Content" setting:

<style>
blockquote:before { content: none; }
</style>

@ssddanbrown commented on GitHub (Apr 18, 2022): @tcsi-github I wouldn't really look to change the default style based on people using blockquotes against their intended purpose. You can override the styles on your instance if desired using the "Custom HTML Head Content" setting: ```html <style> blockquote:before { content: none; } </style> ```

OVERLORD commented

2026-02-05 02:25:55 +03:00

@tcsi-github commented on GitHub (Apr 18, 2022):

That is perfectly acceptable for me. Thank you for the workaround.

@tcsi-github commented on GitHub (Apr 18, 2022): That is perfectly acceptable for me. Thank you for the workaround.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1994