New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Office 365 and Outlook.com trims characters in a font-family #8

Open
hteumeuleu opened this Issue Oct 21, 2015 · 1 comment

Comments

Projects
None yet
1 participant
@hteumeuleu
Owner

hteumeuleu commented Oct 21, 2015

As reported here, Office 365 trims values of the inline CSS property font-family whenever there's a \ inside an @ declaration in a <style> tag.

The following example…

<style type="text/css">
    @ { "\" }
</style>
<p style="font-family: 'Indie Flower', 'Arial', 'Helvetica', 'Lucida Grande', 'sans-serif';">
    Lorem ipsum dolor sit amet.
</p>

…will be transformed by Office 365 into the following :

<style type="text/css"><!--  --></style>
<div>
    <div>
        <p style="font-family:'ni ">Lorem ipsum dolor sit amet. </p>
    </div>
</div>

This doesn't happen if we remove the @ { "\" } part in the <style> tag. Now the truncating is different if every font in the font-family stack is declared between quotes (or double quotes), and if there is no quote.

If every font is declared between quotes (or double quotes), the trimming algorithm Office 365 employs looks like something like this. Count the number of fonts declared in the font stack, and substract two (and let's call this n). Then start after the first opening quote (or double quote) in the font stack and only keep the first n odd characters. This is why in the previous example, the following font stack :

'Indie Flower', 'Arial', 'Helvetica', 'Lucida Grande', 'sans-serif'

…is transformed into :

'ni 

This behavior is completely different if any of the font in the font stack is between quotes (or double quotes). The following code :

<style type="text/css">
    @ { "\" }
</style>
<p style="font-family: 'Indie Flower', 'Arial', 'Helvetica', 'Lucida Grande', 'sans-serif';">Test 1</p>
<p style="font-family: 'Indie Flower', 'Arial', 'Helvetica', 'Lucida Grande', sans-serif;">Test 2</p>
<p style="font-family: 'Indie Flower', 'Arial', 'Helvetica', Lucida Grande, sans-serif;">Test 3</p>
<p style="font-family: 'Indie Flower', 'Arial', Helvetica, Lucida Grande, sans-serif;">Test 4</p>
<p style="font-family: 'Indie Flower', Arial, Helvetica, Lucida Grande, sans-serif;">Test 5</p>
<p style="font-family: Indie Flower, Arial, Helvetica, Lucida Grande, sans-serif;">Test 6</p>

…is transformed into :

<style type="text/css"><!--  --></style>
<div>
    <div>
        <p style="font-family:'ni ">Test 1</p>
        <p style="font-family:'ni lower', 'A">Test 2</p>
        <p style="font-family:'ni Flower', 'Aril', 'Helve">Test 3</p>
        <p style="font-family:'nie Flower' 'Arial', Helvtica, Luci">Test 4</p>
        <p style="font-family:'ndie Fower', Aril, Helvetica, ucida Gran">Test 5</p>
        <p style="font-family:Indie Flower,Arial,Helvetica,Lucida Grande,sans-serif">Test 6</p>
    </div>
</div>

@hteumeuleu hteumeuleu added the bug label Oct 21, 2015

@hteumeuleu hteumeuleu changed the title from Office 365 trims characters in a font-family to Office 365 and Outlook.com trims characters in a font-family Aug 18, 2016

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jan 30, 2018

Owner

The latest Outlook.com beta still has this bug.

Owner

hteumeuleu commented Jan 30, 2018

The latest Outlook.com beta still has this bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment