Search code examples
htmlcssasp-classicms-office

Adjusting image properties using MSO prefixes


I need to resize an image using Microsoft Office prefixes (MSO)
It's important to note that I am unable to use inline styles.

I've already tried the CSS and HTML versions using %,px and no specification as shown here:

img {
    display: block;
    width: 600;
    height: auto;
}

However these have no effect.

I understand that I will most likely need to use the MSO prefix instead. Although, I can't seem to find any that will allow me to change the properties of the image.

Expected Result:

Images are resized once sent to the word document

Actual Result:

Images are not affected by any styling.

For reference the type of prefix that I'm looking for is exactly the same as: https://gist.github.com/webtobesocial/ac9d052595b406d5a5c1

but simply with the ability to alter images instead of changing font-family etc.
Do you know what I'm missing? Any help is much appreciated.

    <!-- /* Style Definitions */
    img {
         height: auto;
         max-width: 8.5in ;
    }
    @page firstSection{
      size:8.5in 11.0in; 
      margin:1.0in 1.25in 1.0in 1.25in ;
      mso-header-margin:.5in;
      mso-footer-margin:.5in; mso-paper-source:0;
      }
    -->

    Response.ContentType = "application/msword"
    Response.AddHeader "Content-Disposition","attachment;filename=documentName.doc" 
    Response.write("<html " & _ 
        "xmlns:o='urn:schemas-microsoft-com:office:office' " & _
        "xmlns:w='urn:schemas-microsoft-com:office:word'" & _ 
        "xmlns='https://www.w3.org/TR/html401/'>") 

    Response.Write "<!--[if mso]>" _
              & "<tr><td style='padding:0px;margin:0px;'>&nbsp;</td><td style='padding:0px;margin:0px;' width='560'>" _
              & "<![endif]-->"

    Response.Write"<!--[if gte mso]><xml><w:WordDocument> 
        <w:View>Print</w:View>" & _
        "<w:Zoom>90</w:Zoom><w:DoNotOptimizeForBrowser/></w:WordDocument></xml>" & _
        "<![endif]-->"

     <body lang=EN-US style='tab-interval:.5in'>
      <div class=Section1>
       <!--Printable Content is added here EG-->
       <img="https://i.sstatic.net/l60Hf.png"/>
      </div>
     </body>
    </html>

    Response.Write "<!--[if mso]></td><td style='padding:0px;margin:0px;'>&nbsp;</td></tr><tr>" _
              & "<td colspan='3' style='padding:0px;margin:0px;font-size:20px;height:20px;' height='20'>&nbsp;</td></tr></table>" _
              & "<![endif]-->"

Solution

  • For anyone else who is looking for this answer in future the solution is unfortunately an inline style.

    MSO will not accept CSS properties on images. However, you can use the basic HTML attributes:

    width='640' height='400'
    

    Which Microsoft Word will actually listen to. The only downside being is that these do have to be in-line.

    Thus, in this scenario I used Replace() to edit any <img style= tags with: "<img style= width: 640px;'" width='640'

    This has fixed the majority of my image size formatting issues in word and I hope this answer will prove useful to someone else someday.