Writing Equations using HTML and API on webpage

 HTML codes for writing equations

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>