htmlxmlmfcxslt-1.0hindi

Some of my Hindi characters are not showing correctly in my CHtmlView (xml.xsl). Why?

MFC Dialog VS2015

My application uses a CHtmlView browser. In this context is it a hidden browser that is purely used to fire the print preview mechanism. I have just started to add support for printing webpages with Hindi content.

When my application is displaying the Print Preview (via CHtmlView), sometimes the text is not showing correctly:

CHtmlView

The content being displayed is an image with text overlay. Simple stuff. The font is Arial Unicode MS. The data is XML using a XSL template.

If I open the same file directly in Internet Explorer 11:

Internet Explorer 11

As you can see, it has shown the same text correctly.

And if I right-click in IE11, and view source, and copy it into Microsoft Expression Web 4:

MS Expression Web 4

Again, it all looks good. So why is the CHtmlView print preview not displaying it correctly?

If you have any ideas as to why this may be happening I would like to know. The other 30 languages I support (including Arabic does not suffer this problem).

This is the head section of the HTML. And I confirm that the HTML file is UTF-8 encoded:

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="hi" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>
              Assignment Slips
            </title>
    <style type="text/css">
    body {
        font-family: 'Arial Unicode MS';
        font-size: 10pt;
    }
    .containerPage {
    }
    .containerSlip{
        float:left;
        position: relative; 
        margin: 3mm;
    }
    .fieldName {
        position: absolute;
        left: 45px; top: 48px; width: 265px;
    }
    .fieldAssisant {
        position: absolute;
        left: 63px; top: 85px; width: 246px;
    }
    .fieldDate {
        position: absolute;
        left: 56px; top: 124px; width: 254px;
    }
    .fieldCounsel {
        position: absolute;
        left: 76px; top: 158px; width: 230px;
    }
    .fieldOther {
        position: absolute;
        left: 77px; top: 291px; width: 155px;
        font-size: 8pt;
    }
    .checkBibleReading {
        position: absolute;
        left: 30px; top: 215px; width: 15px;
    }
    .checkInitialCall {
        position: absolute;
        left: 30px; top: 232px; width: 15px;
    }
    .checkReturnVisit {
        position: absolute;
        left: 30px; top: 248px; width: 15px;
    }
    .checkBibleStudy {
        position: absolute;
        left: 30px; top: 267px; width: 15px;
    }
    .checkOther {
        position: absolute;
        left: 30px; top: 285px; width: 15px;
    }
    .checkMainHall {
        position: absolute;
        left: 176px; top: 215px; width: 15px;
    }
    .checkAuxClass1 {
        position: absolute;
        left: 176px; top: 232px; width: 15px;
    }
    .checkAuxClass2 {
        position: absolute;
        left: 176px; top: 248px; width: 15px;
    }
    </style>
</head>

But please keep in mind that the content of the hidden CHtmlView (which fires the Print Preview) is the result of the XML/XSL translformation.

This is the XSL template:

<?xml version="1.0" encoding="utf-8"?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes" version="4.01"
      doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
      doctype-public="//W3C//DTD XHTML 1.0 Transitional//EN"/>
    <xsl:template match="/">
      <html xmlns="http://www.w3.org/1999/xhtml">
        <xsl:attribute name="lang">
          <xsl:value-of select="//Settings//LanguageCode"/>
        </xsl:attribute>
        <head>
          <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
          <link rel="stylesheet" type="text/css">
            <xsl:attribute name="href">
              <xsl:value-of select="//Settings/Template/@Style"/>
            </xsl:attribute>
          </link>
          <title>
            <!--<xsl:value-of select="//Labels/ReportTitleWorksheets"/>-->
            Assignment Slips
          </title>
          <style type="text/css">
            @import url('<xsl:value-of select="//Settings/Template/@Style"/>');
          </style>
        </head>
        <body>
          <xsl:for-each select="AssignmentSlips/Page">
            <div class="containerPage">
              <xsl:if test="@PageBreakBefore=1">
                <br style="page-break-before: always;"/>
              </xsl:if>
              <xsl:for-each select="StudentSlip">
                <div class="containerSlip">
                  <img alt="s89" width="323px" height="429px">
                    <xsl:attribute name="src">
                      <xsl:value-of select="//Settings/Template"/>
                    </xsl:attribute>
                  </img>
                  <div class="fieldName">
                    <xsl:attribute name="dir">
                      <xsl:value-of select="//Settings/Direction"/>
                    </xsl:attribute>
                    <xsl:value-of select="Student"/>
                  </div>
                  <div class="fieldAssisant">
                    <xsl:attribute name="dir">
                      <xsl:value-of select="//Settings/Direction"/>
                    </xsl:attribute>
                    <xsl:value-of select="Assistant"/>
                  </div>
                  <div class="fieldDate">
                    <xsl:attribute name="dir">
                      <xsl:value-of select="//Settings/Direction"/>
                    </xsl:attribute>
                    <xsl:value-of select="Date"/>
                  </div>
                  <div class="fieldCounsel">
                    <xsl:attribute name="dir">
                      <xsl:value-of select="//Settings/Direction"/>
                    </xsl:attribute>
                    <xsl:value-of select="StudyPoint"/>
                  </div>

                  <xsl:choose>
                    <xsl:when test="Assignment=1">
                      <div class="checkBibleReading">✓</div>
                    </xsl:when>
                    <xsl:when test="Assignment=2">
                      <div class="checkInitialCall">✓</div>
                    </xsl:when>
                    <xsl:when test="Assignment=3">
                      <div class="checkReturnVisit">✓</div>
                    </xsl:when>
                    <xsl:when test="Assignment=4">
                      <div class="checkBibleStudy">✓</div>
                    </xsl:when>
                    <xsl:when test="Assignment=5">
                      <div class="checkOther">✓</div>
                      <div class="fieldOther">
                        <xsl:attribute name="dir">
                          <xsl:value-of select="//Settings/Direction"/>
                        </xsl:attribute>
                        <xsl:value-of select="Other"/>
                      </div>
                    </xsl:when>
                  </xsl:choose>
                  <xsl:choose>
                    <xsl:when test="Location=1">
                      <div class="checkMainHall">✓</div>
                    </xsl:when>
                    <xsl:when test="Location=2">
                      <div class="checkAuxClass1">✓</div>
                    </xsl:when>
                    <xsl:when test="Location=3">
                      <div class="checkAuxClass2">✓</div>
                    </xsl:when>
                  </xsl:choose>
                </div>
              </xsl:for-each>
            </div>
          </xsl:for-each>
        </body>
      </html>
    </xsl:template>
</xsl:stylesheet>

But I confirm that I keep getting this sporadic problem of some characters not showing right in my specific print preview.

Solution

  • I want to provide a new answer for this issue.

    What I had to do was get the CHtmlView to use the latest installed Internet Explorer browser. This can be achieved by inserting this meta data directly after the <head> tag, like this:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    So the <head> element might look like this:

    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style type="text/css">
        /* Styles here */
    </style>
    <title>Document Title</title>
</head>

    Since my HTML document is created using a XSL transformation I was able to include the above meta. The only side effect of using the latest browser was that my page-breaks were no longer working. But I was able to change my HTML syntax to get them working again.

    A simple code change to the HTML file will get it to use the latest installed browser. No more font corruption!