-1

I need to write several formulas in CSS (or is there some other way?) and integrate it on my quiz website for students.

I already found some interesting examples in here: http://www.periodni.com/mathematical_and_chemical_equations_on_web.html

But I need one more, as can be seen in this picture:

Andrea
  • 19
  • 3
  • 1
    Did you try this library ? http://www.easychem.org/en/rules-struct – NPlay Feb 04 '15 at 10:28
  • Is there a particular reason you cant just use an image? – Steve Feb 04 '15 at 10:29
  • You cannot write chemical formulas in CSS. CSS is a poor lonesome *styling language*. You can try to format formulas using CSS; but then you need the formulas in HTML (or XML) format, but that format is crucial for styling. The question how to present chemical formulas in HTML and CSS is too broad, especially when you have not specified what kinds of formulas would be handled. – Jukka K. Korpela Feb 04 '15 at 11:24

2 Answers2

2

I upvoted Nplay comment, easychem seems really fun.

Filthy, dirty way to achieve it with HTML (don't try this at home please) : 

<p>
  <span style="visibility: hidden;">CH<sub>3</sub> - </span>CH<sub>3</sub><br/>
  <span style="visibility: hidden;">CH<sub>3</sub> - </span>|<br/>
  CH<sub>3</sub> - C - CH<sub>3</sub><br/>
  <span style="visibility: hidden;">CH<sub>3</sub> - </span>|<br/>
  <span style="visibility: hidden;">CH<sub>3</sub> - </span>CH<sub>3</sub><br/>
</p>
slaur4
  • 494
  • 3
  • 11
  • Thank you!!! And sorry if my request was too strange... Easychem is really cool!!! Also thank you for this dirty html code :) – Andrea Feb 04 '15 at 13:44
1
CO<sub>2</sub><br>
H<sub>2</sub> + O --->H<sub>2</sub>O

CO2
H2 + O --->H2O

kishan
  • 454
  • 3
  • 10