Odd Line Breaks via Markdown

[lcjohnso]

What the app is supposed to do

Render Markdown-formatted text (e.g., task instructions) correctly.

What the app does instead

Line breaks in text cause the word that immediately follows (the first on the newline) to appear in subscript / below normal baseline.

Example: see task instructions for Planet Hunters NGTS's Exoplanet Transit Search workflow.

Raw Input String (two lines):
**Exoplanet Transit Search**
Look at folded light curve. What do you see? (**Select all that apply**)

DB Stored String (combined with \n character):
**Exoplanet Transit Search**\nLook at folded light curve. What do you see? (**Select all that apply**)

Screenshot:

Exact steps to Reproduce

Add string from example above to any workflow task instructions, view in app to see that "Look" is subscripted below normal baseline.

Device Info

• OS: iOS + Android
• Device: iPhone 12 (OS=15.5) + Android Pixel 3 (OS=12)
• Version: 2.9.1 (latest)

[coryzoon]

It seems to be a known issue with the markdown library that Zooniverse mobile app is using (CharlesMangwa/react-native-simple-markdown#103). That particular library hasn't been updated since January 2018. I would recommend a newer library like react-native-markdown-package. When I swap libraries, this is what it looks like now. I just need to test more projects to make sure everything else looks good.

[coryzoon]

Following up on this. react-native-markdown-package was having issue with images. The way the current library works is that it will load the image, calculate the size, update the size the of the image, and re-render the component. In React Native you need to specify the dimensions of the image. The newer library is not re-rendering so the image stays at height: 0, width: 0. After doing more research on the original line break issue I found that the easiest way to fix this was the replace every instance of "\n" with "\n\n". I did this and it fixes the issue (screenshot attached). I will say that if markdown is important to the mobile app it might be worth investing some time to make it work with a newer library like react-native-markdown-package but it would probably require a deeper understanding of how the app is using markdown and probably some rewriting of existing functionality in the app to make it work with the newer library.

[lcjohnso]

I confirm that Markdown is important in the long run for the mobile app, as all project content (tutorial, task instructions, field guide content, etc.) is input by project teams using Markdown, and the platform's use of Markdown syntax will continue indefinitely. Therefore, it may be worth a more comprehensive revisiting of library choices in the future.

I'll note that the FE team is also currently tackling Markdown library issues (see project board and recent PR), so evidence that Markdown support is a continuing struggle, but also acknowledging that their choices for web will differ from those for mobile (i.e., likely there isn't much in the way of directly applicable lessons from the FEM work).