• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to stack equations aligned by the = sign using MathXMLcode brought over from word.

New Here ,
Feb 07, 2023 Feb 07, 2023

Copy link to clipboard

Copied

I created this code using Word. In word it is aligned by equal signs, but as is clear, the alignment disappears when I clip and paste it.  What can I do to align this when I drop the MathXML into my Dreamweaver HTML?  Thanks.  

 

Molly25619246empt_0-1675782065852.png

 

 

Molly25619246empt_1-1675782065853.png

 

 

Molly25619246empt_2-1675782065854.png

 

Views

122

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 07, 2023 Feb 07, 2023

Copy link to clipboard

Copied

I don't know of any automatic way of doing this. Probably the easiest would be to have a 3 column table, with an equation in a given row...

In the center column would be the equal sign.
Everything to the left of the equal sign would be right aligned, in the left colum.
Everything right of the sign would be in the right column and left aligned.

<table>
<tr class="equation">
<td>left equation bits</td>
<td>=</td>
<td>right equation bits</td>
</tr>
<tr class="equation">
<td>some other left equation bits</td>
<td>=</td>
<td>some other right equation bits</td>
</tr>
<tr class="equation">
<td>and yet more left equation bits</td>
<td>=</td>
<td>and yet more right equation bits</td>
</tr>
</table>

Then use the first-child and last-child selectors in the css to align them...

tr.equation > td:first-child {text-align:right;}
tr.equation > td:last-child {text-align:left;}


Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 07, 2023 Feb 07, 2023

Copy link to clipboard

Copied

What will this be used for?

I ask because you might have better results exporting from Word to PDF (print) rather than HTML.

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 07, 2023 Feb 07, 2023

Copy link to clipboard

Copied

LATEST

You could use an image as you have done here.

 

Another solution is to use HTML as in (using Bootstrap 5)

 

 

 

<div class="d-flex align-items-center">
    <div class="pe-2">=</div>
    <div class="pe-2"><span class="border-bottom">[X]decarbonated</span><br>[AI]decarbonated</div>
    <div class="pe-2">x</div>
    <div class="pe-2">[AI]washed</div>
    <div class="pe-2">+</div>
    <div>[X]carb</div>
</div>

 

 

 

with this result

 

BenPleysier_1-1675811087147.png

Edit: You will need to style the bottom border a bit further.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines