CODEWITHSUNDEEP
htmlpython-3.xtextbokeh
troymyname00
troymyname00

Reputation: 702

How To Display Text in Bokeh While Preserving Line Gaps

I am trying to generate a report consisting of plots and some text using Bokeh 2.0.1, and I am trying to preserve the original line gaps in the text that I feed into bokeh.layouts.gridplot.

However, I see that all the line gaps get removed after the HTML file is generated, and essentially, all paragraphs get merged into one continuous sentence. I am not sure why that is happening. I didn't find much help in the Bokeh documentation regarding this issue.

Here's a minimal example of the section of the code I am trying to get to work.

from bokeh.layouts import gridplot
from bokeh.models import Paragraph
from bokeh.plotting import output_file, save

sampText = "PARAGRAPH 1: This is a minimal example of a text. This is a minimal example of a text. This is a minimal example of a text. This is a minimal example of a text. This is a minimal example of a text. This is a minimal example of a text.\n

PARAGRAPH 2: This is a minimal example of a text. This is a minimal example of a text. This is a minimal example of a text. This is a minimal example of a text. This is a minimal example of a text."

fig1 = ...

fig2 = ...

text = Paragraph(text = sampText, width = 1500, height_policy = "auto", style = {'fontsize': '10pt', 'color': 'black', 'font-family': 'arial'})

output_file(filename = "myMinimalExampleOutput" + ".html")
output = gridplot([fig1, fig2, text], ncols = 1, plot_width = 1500, sizing_mode = 'scale_width')
save(output)

Could someone please point out why this is happening?

Upvotes: 0

Views: 729

Answers (1)

Eugene Pakhomov
Eugene Pakhomov

Reputation: 10697

This is how HTML works - it removes all "unnecessary" whitespace from the text.

For your two paragraphs to work, you have to wrap each of them in <p></p>. But since Paragraph generates the same tag, you can't use that class. Use the regular Div and set its text input parameter to the HTML that you want to be rendered.

Div(text='<p>paragraph 1</p><p>paragraph 2</p>')

Upvotes: 1

Related Questions