Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

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?