Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Output two aligned protein or DNA sequences nicely on top of each other

They are both strings but of different lengths. There are “-”'s where there are gaps so they end up being the same length.

How can I output them on top of each other in slices of say 50 or even responsive using dbc components?

As of now, my only solution was to use style{ word-wrap: break-word} after I concatenated the strings but this results in one full sequence printed before the other.


Those bars and periods near the middle I can do without.

My code:

alignments_html = html.Div([
                    'word-wrap': 'break-word'
            ) for i in range(len(align_str_arr))

where align_str_arr is a list of the concatenated strings as there could be more than one alignment of the two sequences.
In Javascript I would have

elements each containing about 50 characters from one sequence then alternate between sequence A and B.
Is there a nice Dash Python solution for this?