So I have this:
And the typesetting code is here:
<html>
<head>
<style>
#step_id1 {
color: black;
}
#comment_id1 {
color: black;
}
#step_id2 {
color: brown;
}
#comment_id2 {
color: black;
}
#step_id3 {
color: black;
}
#comment_id3 {
color: blue;
}
#step_id4 {
color: brown;
}
#comment_id4 {
color: blue;
}
#yield_id {
color: blueviolet;
}
.upper_header_bar {
border-top: 3px solid #ff2222 !important;
width: 550px;
}
.lower_header_bar {
border-bottom: 2px solid black !important;
width: 550px;
}
.footer_bar {
background-color: #ff2222;
width: 550px;
height: 3px;
}
</style>
<script src="Algotype.js"></script>
</head>
<body>
<alg-algorithm header="Bidirectional-Breadth-First-Search$(s, t)$"
algorithm-upper-header-class="upper_header_bar"
algorithm-lower-header-class="lower_header_bar"
algorithm-footer-class="footer_bar">
<alg-if condition="$s = t$">
<alg-return>$\langle s \rangle$</alg-return>
</alg-if>
<alg-step>$Q_A \leftarrow \langle s \rangle$</alg-step>
<alg-step>$Q_B \leftarrow \langle t \rangle$</alg-step>
<alg-step>$\pi_A \leftarrow \{ (s \mapsto \Nil) \}$</alg-step>
<alg-step>$\pi_B \leftarrow \{ (t \mapsto \Nil) \}$</alg-step>
<alg-step>$\delta_A \leftarrow \{ (s \mapsto 0) \}$</alg-step>
<alg-step>$\delta_B \leftarrow \{ (t \mapsto 0) \}$</alg-step>
<alg-step>$C \leftarrow \infty$</alg-step>
<alg-step>$\mu \leftarrow \Nil$</alg-step>
<alg-while condition="$|Q_A| > 0 \; \And \; |Q_B| > 0$">
<alg-step>$\Delta_A \leftarrow \delta_A($Front$(Q_A))$</alg-step>
<alg-step>$\Delta_B \leftarrow \delta_B($Front$(Q_B))$</alg-step>
<alg-if condition="$\mu \neq \Nil \; \And \; C \lt \Delta_A + \Delta_B$">
<alg-return>Traceback-Path$(\mu, \pi_A, \pi_B)$</alg-return>
</alg-if>
<alg-if condition="$|\delta_A| < |\delta_B|$">
<alg-step>$u \leftarrow $Remove-First$(Q_A)$</alg-step>
<alg-foreach condition="$v \in $Children$(u)$">
<alg-if condition="$v\;\Not\;\Mapped\;\In\;\delta_A$">
<alg-step>$\delta_A(v) \leftarrow \delta_A(u) + 1$</alg-step>
<alg-step>$\pi_A(v) \leftarrow u$</alg-step>
<alg-step>Add-Last$(Q_A, v)$</alg-step>
<alg-if condition="$v\; \Mapped \; \In \; \delta_B \; \And \; C \gt \delta_A(v) + \delta_B(v)$">
<alg-step>$C \leftarrow \delta_A(v) + \delta_B(v)$</alg-step>
<alg-step>$\mu \leftarrow v$</alg-step>
</alg-if>
</alg-if>
</alg-foreach>
</alg-if>
<alg-else>
<alg-step>$u \leftarrow $Remove-First$(Q_B)$</alg-step>
<alg-foreach condition="$v \in $Parents$(u)$">
<alg-if condition="$v\;\Not\;\Mapped\;\In\;\delta_B$">
<alg-step>$\delta_B(v) \leftarrow \delta_B(u) + 1$</alg-step>
<alg-step>$\pi_B(v) \leftarrow u$</alg-step>
<alg-step>Add-Last$(Q_B, v)$</alg-step>
<alg-if condition="$v\; \Mapped \; \In \; \delta_A \; \And \; C \gt \delta_A(v) + \delta_B(v)$">
<alg-step>$C \leftarrow \delta_A(v) + \delta_B(v)$</alg-step>
<alg-step>$\mu \leftarrow v$</alg-step>
</alg-if>
</alg-if>
</alg-foreach>
</alg-else>
</alg-while>
<alg-error>No path between $s$ and $t$.</alg-error>
</alg-algorithm>
<alg-algorithm header="Traceback-Path$(\mu, \pi_A, \pi_B)$"
algorithm-upper-header-class="upper_header_bar"
algorithm-lower-header-class="lower_header_bar"
algorithm-footer-class="footer_bar">
<alg-step>$p \leftarrow \langle \rangle$</alg-step>
<alg-step>$u \leftarrow \mu$</alg-step>
<alg-while condition="$u \neq \Nil$">
<alg-step>Add-First$(p, u)$</alg-step>
<alg-step>$u \leftarrow \pi_A(u)$</alg-step>
</alg-while>
<alg-step>$u \leftarrow \pi_B(u)$</alg-step>
<alg-while condition="$u \neq \Nil$">
<alg-step>Add-Last$(p, u)$</alg-step>
<alg-step>$u \leftarrow \pi_B(u)$</alg-step>
</alg-while>
<alg-return>$p$</alg-return>
</alg-alg-algorithm>
</body>
</html>
(The Algotype.js
lives here.)
Please tell me whatever comes to mind.