font[inline]

[emilos]

We'd like to add inlining support for font tags too. This behavior is already implemented for <style inline tags and can potentially be reused for this new use case.

Some related code can be found here https://github.com/buxlabs/boxwood/blob/master/src/plugins/InlinePlugin.js#L54

This way, the following code:

<font Nunito from="assets/fonts/Nunito.ttf" inline />

should be transformed into a style tag, that has a base64 representation of the font.

[inikonorov]

I decided that it is easier task, than others and try to do this! I have a question - is it okay, that boxwood can't works with inline style tag which contains links on local files? When I try to use div { background: url(./logo.jpg) } in inline style tag, boxwood outputs <style>div{background:url(./logo.jpg)}</style> instead of base64 encoded image

[emilos]

@inikonorov it should handle this case correctly, here's a test:

https://github.com/buxlabs/boxwood/blob/master/test/spec/tags/style/inline.spec.js

you need to specify a paths compiler option so that the compiler knows where to look for files :)

[inikonorov]

okay, thanks!

[inikonorov]

hmm, I write code, that turns file url to base64, but there is a problem - base64 string is not correct. When I try to put <style> tag with @font-face with getting base64 string, I get the error net::ERR_INVALID_URL. I tried to get base64 string of font via different services and every service gave me the string, that not equal to string from fs.readFile. Don't know what to do :(

[emilos]

@inikonorov thanks for looking into this :). I had a similar problem when I was implementing something similar. I think you can just reuse some of the existing code for this.

Inside of tags/font.js we just inline the font declaration there. If inline attribute is present, we want to reuse some of the code from InlinePlugin to do the inlining, the same way. For this issue, we need to figure out how to reuse that code.

[inikonorov]

#653

[emilos]

@inikonorov thanks!