locked
[UWP][HTML]Emulator Text Size Display Problem RRS feed

  • Question

  • Hi All,

    I've discovered what I think are inconsistencies in displaying HTML text in a WebView control in my UWP app when I run it through the VS2017 Emulators. When I use the 'margin-left' and 'margin-right' directives to give my text a margin either side of the display the emulator reduces the text font size. However, if, instead of the 'margin' directives I use the 'padding-left' and 'padding-right' directives the text size is unaffected. This only happens when I run the app via the emulators - actually I've only tried two of the emulators; 'Mobile Emulator 10.0.15063.0 720. 5 inch 1GB' and 'Mobile Emulator 10.0.15063.0 WVGA 4 inch 512MB' but the results are exactly the same for both.

    Firstly, the original HTML without any margin or padding directives is as follows:

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta charset="utf-8" />
        <title>HTML Problem Demo</title>
        <style type="text/css">
            .newStyle1 {
                color:gold;
                font-family: "Segoe UI";
                text-decoration: underline;
                line-height: 15px;
                letter-spacing: normal;
                text-align:center;
            }
            .newStyle2 {
                color: gold;
                font-family: 'Segoe UI';
                font-weight: bold;
                line-height: normal;
                letter-spacing: normal;
                text-align: justify;
            }
        </style>
    </head>
    <body style="background-image:url(/Assets/milky-way-2695569_1920.jpg)" >
        <script >
            window.onclick = notifyExt;
            function notifyExt()
            {
                window.external.notify("onclick");
            }
        </script>
    
        <h1 class="newStyle1"><span class="newStyle1">No Margin or Padding</span></h1>
        <p class="newStyle2">
            The quick brown Fox jumped over the lazy Dog.
        </p>
        <p class="newStyle2">
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
            The quick brown Fox jumped over the lazy Dog.
        </p>
        <p class="newStyle2">To exit the app click the Exit button.</p>
    </body>
    </html>

    I used exactly the same HTML but added two 'margin' directives to 'newStyle2', as follows:

            .newStyle2 {
                color: gold;
                font-family: 'Segoe UI';
                font-weight: bold;
                line-height: normal;
                letter-spacing: normal;
                text-align: justify;
                margin-
                margin-right: 15px;
            }

    To use the 'padding' directives I set up 'newStyle2' as follows:

            .newStyle2 {
                color: gold;
                font-family: 'Segoe UI';
                font-weight: bold;
                line-height: normal;
                letter-spacing: normal;
                text-align: justify;
                padding-
                padding-right: 1em;
            }

    To illustrate the problem I've created a UWP app the displays the three versions of HTML in three WebView controls as the following screenshots show:

    Firstly, the app run on the 'Local Machine':

    As you can see the text size in each case is unaltered.

    Secondly, the app run via the emulator:

    As can be seen, the middle display using the 'margin' directives has the text size reduced. I thought it might have something to do with specifying the margin value in pixels but what, I don't know (and I couldn't find out any info on it).

    Now, I'm definitely not an HTML expert and I may have missed something obvious but can anybody tell me what's going on here, please?

    Any help will be gratefully received.

    Kind regards,


    RobDev




    • Edited by RobDev Sunday, February 3, 2019 3:29 PM
    Sunday, February 3, 2019 3:23 PM