CODEWITHSUNDEEP
htmlcssfont-facefont-size
laurent
laurent

Reputation: 90776

How to make sure that the font size is correct when copied from an HTML page?

I've got the following page: http://pogopixels.com/test/generated.html

In this page, the title "Massachusetts Personal Auto" is simply:

<h1>Massachusetts Personal Auto</h1>

With the following CSS:

@font-face {
    font-family: MyriadPro-Bold;
    src: url(https://pogopixels.com/clients/widgetworld/fonts/get.php?name=MYRIADPRO-BOLD.OTF); 
}

h1 {
    font-family: MyriadPro-Bold;
    font-size: 16px;
    text-align: center;
}

The font size is 16px and when I check the element in the Chrome console, I see it's indeed 16px. However, when I copy and paste it in LibreOffice (or any other rich text editor), the font comes out as 12px. On the HTML page it's true that it looks more like 12px than 16px.

I'm not sure what I'm missing. How can I make sure that it looks like 16px and that it's still 16px when I copy and paste it somewhere?

Upvotes: 0

Views: 1381

Answers (2)

laurent
laurent

Reputation: 90776

Ok I found what the issue was. What I needed was not a size in pixels (px) but a size in points (pt), which is what text editors use to set the font size.

So by setting the font size to 16pt instead I got the right size when copied in text editor, converted to PDF, etc.

Upvotes: 2

James McManus
James McManus

Reputation: 66

When you copy from a web page, the actual data that gets copied depends on the browser. And when you paste to an application, different applications will have different abilities to interpret the web page data it reads from the clipboard.

For example, when using Chrome to copy from your example page, the clipboard contains HTML with a bunch of inline styles, including font-weight: 16px. LibreOffice Writer seems to be able to pick up some of the font information along with HTML structure such as heading levels, but it changes the font size to 12 despite the inline style info.

When copying from Firefox, the clipboard only contains basic HTML without any inline styles. In this case, LibreOffice Writer doesn't do any special formatting beyond translating some of the HTML to its own concepts of structure (such as heading levels). At least this would allow you to customize the styles that LibreOffice is applying. But obviously you can't do that on behalf of other users.

I don't think there is a way to get consistent results across a variety of sources and destinations.

Upvotes: 2

Related Questions