Writing Equations using HTML and API on webpage

 HTML codes for writing equations

1. 1) Roots:-
2. 2) Superscript and Subscript text:-
3. 3)Fractions:-
4. 4)Combinations:-
5. 5)Complex Equations:-
6. Text
7. To rotate text in Table
8. Roots
9. Table 
10. Table border Style
11. Direct Downloading Link from Google Drive
12. To generate automated Table of Contents use following code

1) Roots:-

Code                    Output

√ 4 = 2            -->  √ 4 = 2

   

∛ 27 = 3         -->  ∛ 27 = 3

∜ 16 = 2         -->  ∜ 16 = 2

2) Superscript and Subscript text:-

<div>2² = 4</div>     --> 2² = 4

<div>3³ = 27</div>    --> 3³ = 27

<div>2⁴ = 16</div>    --> 2⁴ = 16

<div>A₁                       -->    A₁

3)Fractions:-

<p>7&nbsp;<span class="frac">⁴²<span>⁄</span>₇₃</span>.</p>                 --> 7 ⁴²⁄₇₃.

<p>(&nbsp;<span class="frac">⁴²<span>⁄</span>₇₃</span>)</p>                   --> ( ⁴²⁄₇₃)

4)Combinations:-

<p>&#8731; (&nbsp;<span class="frac">⁴²<span>⁄</span>₇₃</span>)</p> --> ∛ ( ⁴²⁄₇₃)

5)Complex Equations:-

MathJax --> API (application programming interface)  --> an external program/tool --> can call like other scripts. To make it work, following code need to be inserted in your HEAD tag:

<SCRIPT SRC='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></SCRIPT>
<SCRIPT>MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}})</SCRIPT>

Just write the right code for the formulas, and MathJax will convert it to formulas when the webpage is opened. Instead of a start and stop tag, you use $$ before and after. So, writing the solution to a second degree equations, the code looks like this:

2$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}.2$ will look like

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

2${df\over dx} = {df\over du} . {du\over dx}.2$ will look like

$${df\over dx} = {df\over du} . {du\over dx}$$

Soil reaction under eccentric loading for straight line variation of soil pressure 2$ P_1 = {W\over A}.(1+{6e\over b}) 2$ will look like

$$P_1 = {W\over A}.(1+{6e\over b})$$

Soil reaction under eccentric loading for Parabolic variation of soil pressure 2$ P_1 = {W\over A}.(1+{4e\over b}) 2$ will look like

$$P_1 = {W\over A}.(1+{4e\over b})$$

for Greek letters alpha write as \alpha

2$ The depth at partial flow d = ({D\over 2}-{D\over 2}.cos{\alpha\over 2}) 2$ will look like

$$d = ({D\over 2}-{D\over 2}.cos{\alpha\over 2})$$

Writing degree symbol (360^\circ)

2$ a = {\pi D^2\over 4}.{\alpha\over 360^\circ} 2$ will look like as

$$a = {\pi D^2\over 4}.{\alpha\over 360^\circ}$$

Brackets can be made bigh using \left and \right, 2${C_D} = \left({D\over {D_T}}\right){\times}{\sum D} 2$ will look like 

$${C_D} = \left({D\over {D_T}}\right){\times}{\sum D}$$

for multiplication use \times

for sigma sign use \sum

Text

to write equation in text use \text{}

2$VDF = {\text{ total damaging effect}\over \text{Number of  vehicles weighed}}2$ will look like

$$VDF = {\text{ total damaging effect}\over \text{Number of  vehicles weighed}}$$

To rotate text in Table

<table border="1" font-size:="">

 <tbody>

  <tr>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Sr.no</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Employee code/Sevarth Id</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Appellation (Shri/Smt./Miss) </span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Official name </span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Gender </span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Father's /Husband's Name</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Date of Birth Format</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">(dd-mm-yyyy)</span></td>     

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Nationality</span></td>     

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Religon</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Aadhar no.</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Nic Email Id</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Mobile No.*</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Department Name</span></td>     

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Organization Unit(OU)</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Cadre</span></td>     

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Designation</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Type of appointment</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Appoint date in the present Cadre Format (DD-MM-YYYY)</span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">Allotment Year </span></td>

  <td><span STYLE="writing-mode: vertical-lr;-ms-writing-mode: tb-rl; transform: rotate(180deg);">(First Appointment) </span></td>     

 </tr>

</tbody></table>

Output will look like

Sr.no

Employee code/Sevarth Id

Appellation (Shri/Smt./Miss)

Official name

Gender

Father's /Husband's Name

Date of Birth Format

(dd-mm-yyyy)

Nationality

Religion

Aadhar no.

Nic Email Id

Mobile No.*

Department Name

Organization Unit(OU)

Cadre

Designation

Type of appointment

Appoint date in the present Cadre Format (DD-MM-YYYY)

Allotment Year

(First Appointment)

Roots

\root {n}\of this syntax put before the expression for which n^th root is required.

for example  expression for Relative stiffness of the bar embedded in concrete (4rth root) 2$\beta =\root {4}\of {{k_{mds}{b_d}}\over {4EI}}$2 will look like

$$\beta =\root {4}\of {{k_{mds}{b_d}}\over {4EI}}$$

Table 

Merging columns & rows

    to merge columns one can use "colspan " 

    to merge rows one can use "rowspan" 

Example code

<table border="1" style="border-collapse: collapse;">

  <tbody>

    <tr>

      <td rowspan="4" style="writing-mode: vertical-rl; text-align: center;">Subtraction of Chainages</td>

      <td colspan="2" style="text-align: center;">Subtraction of Chainages</td>

      <td style="text-align: center;">Result</td>

    </tr>

    <tr>

      <td style="text-align: center;">0/00</td>

      <td style="text-align: center;">13/00</td>

      <td style="text-align: center;">13</td>

    </tr>

    <tr>

      <td style="text-align: center;">23/348</td>

      <td style="text-align: center;">90/758</td>

      <td style="text-align: center;">67.41</td>

    </tr>

    <tr>

      <td style="text-align: center;">101/659</td>

      <td style="text-align: center;">258/368</td>

      <td style="text-align: center;">156.709</td>

    </tr>

  </tbody>

</table>

will give output as follows

Subtraction of Chainages	Subtraction of Chainages		Result
	0/00	13/00	13
	23/348	90/758	67.41
	101/659	258/368	156.709

Table border Style

<style>

table {

  border-collapse: collapse;

  width: 100%;

}

td, th {

  border: 2px solid lightgrey;

  border-style: solid none solid solid;

  padding: 10px;

}

td:first-child, th:first-child {

  border-left: 2px solid lightgrey;

}

td:last-child, th:last-child {

  border-right: 2px solid lightgrey;

}

</style>

Direct Downloading Link from Google Drive

https://drive.google.com/uc?export=download&id="id"

To generate automated Table of Contents use following code

********** First Code ********** Paste Above </head>

<script type='text/javascript'>              

//<![CDATA[           

//*************TOC plugin           

function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           

headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           

{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           

//]]>              

</script>

****** Second Code ******* Paste Above just above ]]></b:skin>

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}

**** Third Code ***** Replace with <data:post.body/> all places

 <div id="post-toc"><data:post.body/></div>

****************** Everytime when you publish a post ******************

+++++++++ Paste Below First Paragraph of Post ++++++++++++++++

<div class="mbtTOC"> 

    <button onclick="mbtToggle()">Contents</button> 

    <ol id="mbtTOC"></ol> 

</div>

+++++ Paste Code at end of post ++++++

<script>mbtTOC();</script>