Hi,
font-face is needed as well, although the inject is the most simple. When
you inject the link font line for google you'll get this on runtime:
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(
https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2)
format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(
https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
we could add this directly, and I thought about this, but I think is better
to inject the link line since is less code and we left to google what code
serve us.
I think this will be the use 99% of times, since today all fonts comes from
google, or at least this seems to me.
Maybe for SWF could have more use, but right now I don't now.
Thanks
2018-03-15 17:05 GMT+01:00 Alex Harui <[email protected]>:
> Hi,
>
> Even @media -inject-html will require rules. I think we want the syntax
> to be CSS compliant.
>
> We can make sure that there are no duplicates whether we use @media or
> inject in the main rules.
>
> BTW, I added @font-face to the compiler CSS tests and it seems to pass
> through to the output just fine.
>
> Thoughts?
> -Alex
>
> On 3/15/18, 1:28 AM, "[email protected] on behalf of Carlos Rovira"
> <[email protected] on behalf of [email protected]> wrote:
>
> >Hi,
> >
> >from Alex email, I think I prefer something like
> >
> >@media -inject_html
> >
> >Since is most near to what this will do (insert one line in the final
> >HTML), and seems the most simple to do.
> >
> >The others seems more problematic, since each rule would need one inject,
> >and you'll probably must not duplicate the same insertion multiple times.
> >
> >I already see that having a Class to inject a font is a hack, so this
> >would
> >be something in the right path
> >
> >
> >
> >
> >2018-03-14 20:52 GMT+01:00 OmPrakash Muppirala <[email protected]>:
> >
> >> On Mar 14, 2018 12:34 PM, "Alex Harui" <[email protected]>
> wrote:
> >>
> >> Hi Om,
> >>
> >> Is this a separate topic?
> >>
> >>
> >> Quite possible 😊 Sorry for the noise.
> >>
> >>
> >> If you are asking for @font-face to be passed
> >> through to the final css we can figure out how to do that if that
> >>doesn't
> >> work already, but I think I'm asking about <link> tags in the HTML. Is
> >> that different or the same? Carlos wants to inject:
> >>
> >> <link
> >>href="https://na01.safelinks.protection.outlook.
> com/?url=https%3A%2F%2Ffo
> >>nts.googleapis.com%2Fcss%3Ffamily%3DLato&data=02%7C01%7Caharui%
> 40adobe.co
> >>m%7Ccaaf64bb0d064b0e737708d58a4ec61c%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7
> >>C0%7C0%7C636566993294846159&sdata=sOtyH7TJhxDM5O%2Bdr%
> 2F7XUWn24ErzNkElo1s
> >>Y4wIrr8g%3D&reserved=0"
> >> rel="stylesheet">
> >>
> >>
> >> Yes you are correct. There is no escaping injecting this piece of html.
> >>
> >> One alternative is allow user to provide a index.html file, where they
> >>can
> >> add whatever they want. If the compiler sees a index.html, it will
> >>reuse
> >> it. If not, it will create a new one and use that.
> >>
> >> Thoughts?
> >>
> >> Thanks,
> >> Om
> >>
> >>
> >>
> >>
> >> Isn't that a bit different?
> >>
> >> -Alex
> >>
> >> On 3/14/18, 12:04 PM, "[email protected] on behalf of OmPrakash
> >>Muppirala"
> >> <[email protected] on behalf of [email protected]> wrote:
> >>
> >> >Ignoring the behind the screen mechanics, as a developer, I would like
> >> >something like this:
> >> >
> >> >*styles.css:*
> >> >
> >> >@font-face {
> >> > font-family: error;
> >> > src: url(helvetica_bold.woff);
> >> >}
> >> >
> >> >@font-face {
> >> > font-family: warning;
> >> > src: url(sans_light.woff);
> >> >}
> >> >
> >> >.error {
> >> > color: red;
> >> > font-family: error;
> >> >}
> >> >
> >> >.warning {
> >> > color: orange;
> >> > font-family: warning;
> >> >}
> >> >
> >> >
> >> >*Component.as:*
> >> >
> >> >package components {
> >> > import styles.css;
> >> > import org.apache.royale.core.WrappedHTMLElement;
> >> > import org.apache.royale.html.util.addElementToWrapper;
> >> > import org.apache.royale.core.UIBase;
> >> >
> >> > public class Component extends UIBase {
> >> > private var myStyles:CSS = styles.css;
> >> > private var myDiv: WrappedHTMLElement =
> >> >addElement.wrapper(this,'div');
> >> >
> >> >//Elsewhere:
> >> > if(condition) {
> >> > myDiv.className = myStyles.classNames.error;
> >> > }
> >> > else {
> >> > myDiv.className = myStyles.classNames.warning;
> >> > }
> >> >
> >> > }
> >> >}
> >> >
> >> >
> >> >The act of "importing" the styles.css should automatically inject the
> >> >appropriate html for importing the css file.
> >> >The CSS class can be a simple object (with perhaps some util methods)
> >> >which
> >> >is constructed by reading all the classnames in the css file.
> >> >
> >> >This approach is sort of inspired from the CSS Modules component used
> >>in
> >> >React development here [1]
> >> >
> >> >Just my 2 cents.
> >> >
> >> >Thanks,
> >> >Om
> >> >
> >> >[1]
> >> >https://na01.safelinks.protection.outlook.com/?url=
> >> https%3A%2F%2Fgithub.co
> >> >m%2Fgajus%2Freact-css-modules&data=02%7C01%7Caharui%40adobe.com
> >> %7Cd03e7327
> >> >d00849781ae908d589de7d38%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C6365
> >> >66511032068655&sdata=X070alK2%2B289tVP6v9xYazcztqtsEmqPiTaPA
> >> 9UxITM%3D&rese
> >> >rved=0
> >> >
> >> >On Wed, Mar 14, 2018 at 10:09 AM, Alex Harui <[email protected]
> >
> >> >wrote:
> >> >
> >> >> The Jewel Theme wants to add a <link> element to the HTML to bring
> >>in a
> >> >> font. The <inject_html> directive was introduced to add elements to
> >>the
> >> >> HTML needed for code in the class decorated by the <inject_html>.
> >> >>Jewel
> >> >> is using a dummy class with <inject_html> which probably means that
> >>the
> >> >>AS
> >> >> code doesn't need the link element, but the CSS in the theme does.
> >> >>
> >> >> IMO, that means that there should be a directive in CSS that also
> >> >>injects
> >> >> html. I don't think comments are retained in CSS, so using
> >>inject_html
> >> >>in
> >> >> a comment is not something I would recommend. IMO, the directive
> >>should
> >> >> be on/in the selectors that need it, and not at the file level.
> >> >>
> >> >> One way to do this would be a fake media-query like:
> >> >>
> >> >> @media -inject_html
> >> >>
> >> >> That could contain selectors with fake properties like:
> >> >>
> >> >> Button {
> >> >> foo: <link .... />
> >> >> }
> >> >>
> >> >> If a Button is used in the app, then the compiler would see the
> >>Button
> >> >> selector in the -inject_html media, and inject the html for every
> >> >>property
> >> >> in the selector. IOW, if you did:
> >> >>
> >> >> Button {
> >> >> foo: <link .... />
> >> >> bar: <style ... />
> >> >> }
> >> >>
> >> >> Then both link and style would be injected into the output HTML.
> >> >>
> >> >> Another approach would be to introduce a special inject_html property
> >> >>that
> >> >> you would use in the selector as needed. So, if Button sets
> >> >> font-family="Lato" it would also set inject_html like below:
> >> >>
> >> >> Button {
> >> >> font-family: Lato;
> >> >> inject-html: <link ... />
> >> >> }
> >> >>
> >> >>
> >> >> This has the advantage of keeping the links with the font-family that
> >> >> needs it, but you will have to duplicate inject-html in each of the
> >> >> selectors that need it.
> >> >>
> >> >> Other ideas are welcome. Thoughts?
> >> >> -Alex
> >> >>
> >> >>
> >>
> >
> >
> >
> >--
> >Carlos Rovira
> >https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2
> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7Ccaaf64bb0d064b0e737708d5
> >8a4ec61c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636566993294846159&s
> >data=wY%2F503X7jzBNrI3sYrAc3nlecUShsqZ77RQ44d2ut7w%3D&reserved=0
>
>
--
Carlos Rovira
http://about.me/carlosrovira
