using rgba for opaque text online?

dockasaurusrex

Hey maybe someone has a quick answer to this question here,

im trying to display overlaid text in an online experiment, ive programmed something that uses span's and passes an rgba value which adjusts the text opacity (ripped from this technique https://osdoc.cogsci.nl/3.2/manual/stimuli/text/). it works great on my desktop but cannot be taken onto chrome, where the transparent text is simply presented in full color. im not entirely sure how the span class works (for instance while I can change the text alpha, I cant seem to change the actual color of the span text, its always black) so if there is an easier solution to changing text opacity then I would be very interested to hear it.

Thanks!

Docky

sebastiaan

Hi @dockasaurusrex ,

When running an experiment in a browser, text rendering using HTML and CSS is a bit more limited than when running on a desktop. (Ironically, because HTML and CSS are web technologies.) I cannot think of an easy way to adjust text opacity in OSWeb. The best workaround depends on the specifics of the experiment, but you could consider presenting the text as images and then changing the opacity in the images themselves. Would that be an option?

— Sebastiaan

dockasaurusrex

Hey Sebastiaan,

thanks for the reply, i actually did end up getting it work and I have no idea how. i suppose what it came down to was finding the right values for the rgba that HTML can understand. or something like that. Anyway for the sake of building communal knowledge here is the code that I implemented

draw textline center=1 color=white font_bold=no font_family=mono font_italic=no font_size=130 html=yes show_if=always text="<span style='color:rgba(50,50,50,200)'>[pre11]</span>" x=-195 y=5 z_index=0

where [pre11] is a predetermined letter selected prior to the trial start. Which is to say you should replace [pre11] with whatever text you want to appear. You can change the opacity by changing the value that is currently 200.

lvanderlinden

Thank you so much for sharing @dockasaurusrex !