Our lab was frequently running into problems regarding the design and readibility of online-instructions. Especially, colored highlighting inline words were problematic using several independent textComponents, styling them depending on condition etc… One Option is often to use Images of e.g. PPTX to display instructions but this does not really work for instructions that need to be partially edited depending on conditions/experiment block.
That escalated quickly to: HTMLinstructions [PsychoPy] (Not Mobile-Ready, may be sensitive to different screen resolutions)
This code is still highly experimental and I have major concerns regarding responsive layout/ some JS code and unforseen experiment breaking behaviour. But for now it works and using it in instruction-only routines seems fine.
I am not a CSS expert, so I decided to share the code in an early phase (I started 24h ago) and If someone is interested, the code can be adapted and extended (feel free to fork and make pull requests (or share another repository)). I will continue adding changes in the future, after some small-scale testing “in the wild”. A stable version of this or similar code may help a lot.