Are more font variants in the pipeline?

Thu Aug 23 06:19:23 PDT 2012

This is maybe a good opening to ask what the thoughts would be on adding
some stuff beyond web-css, in particular "inheritance" (in the OO sense,
not the containment sense that CSS already supports).

So if I have a base style like:

   .my-base-label-style {
       -fx-font: 15px "Open Sans";
       -fx-background-color: red;
   }

Then we have specific instances that then extend this, and override as
needed:

   .my-specific-label-style extends my-base-label-style {
       -fx-border: 1px solid green;
       -fx-background-color: red;
   }

(syntax used is for descriptive purposes only, not a suggestion).

So the resulting styles would be the merged set of these two (with the base
class overriding the parent class styles).

This would mean we could avoid adding both styles in the code, and just add
the actual specific class (which implies the base class), which means
styling is kept nicely in the stylesheet. If I want to change my button to
not use the base class, that's a CSS change, not a code change.

Multiple inheritance would be bonus points (where each 'extends' overrides
the last).

I don't know the ramifications of doing this and if it is possible in the
JFX implementation. I just know this type of usage is something I have
often wanted and wondered about.

If 'extends' style doesn't work, what about an -fx-base-class attribute:

   .my-specific-label-style  {
       -fx-base-class:  my-base-label-style1, my-base-label-style2;
       -fx-border: 1px solid green;
       -fx-background-color: red;
   }

Bad idea?

On Thu, Aug 23, 2012 at 11:01 PM, David Grieve <david.grieve at oracle.com>wrote:

> In this particular case, the parser is explicitly looking for the font
> syntax.
>
> Value lookup doesn't work everywhere. In its current state, it works
> mostly with size values and paints. But even then, there are some holes
> where it doesn't work.
>
> You might want to use multiple style classes.
>
> .my-favourite-font { -fx-font: 15px "Open Sans"; }
>
> Then,
>
> Button button = new Button("Easy");
> button.getStyleClass().add("my-favourite-font");
>
>
> On Aug 23, 2012, at 8:08 AM, Randahl Fink Isaksen wrote:
>
> > The Tip from Daniel actually made me think I discovered a bug in the CSS
> parser. Daniels advice is to create my own font variable like this
> >
> > .root {
> >       -my-favourite-font: 15px "Open Sans";
> > }
> >
> > and then use this variable all over my CSS file instead of the font name
> itself
> >
> > .button {
> >       -fx-font: -my-favourite-font;
> > }
> >
> > But much to my surprise, this indirect way of specifying the font does
> not seem to be supported. I am force to write
> >
> > .button {
> >       -fx-font: 15px "Open Sans";
> > }
> >
> > which means I get the "Open Sans" choice spread out all over my file. I
> am surprised, because using variables this way works for other CSS
> properties like -fx-effect.
> >
> > Anyone got a clue, or should I just file a bug report?
> >
> > Randahl
> >
> >
> >
> >
> >
> > On Aug 20, 2012, at 16:19 , Randahl Fink Isaksen <randahl at rockit.dk>
> wrote:
> >
> >> Thanks for your tip Daniel, I ended up using it :-)
> >>
> >> Randahl
> >>
> >>
> >> On Aug 18, 2012, at 1:17 , Daniel Zwolenski <zonski at gmail.com> wrote:
> >>
> >>> As a wirk around, you could always use a variable in your CSS to keep
> the font declaration in one place. Create something like
> -my-light-emphasis-font at the top of your css file and then reference that
> in your actual CSS class font values everywhere.
> >>>
> >>> Alternatively you could define an additional 'my-light-emphasis' style
> class in your CSS and then add that class to your elements as needed.
> Styles are cumulative so you can add multiple classes to one node.
> >>>
> >>> node.getStyleClass().addAll("my-nodes-style", "my-light-emphasis");
> >>>
> >>> Where the first style could define things specific to that node (like
> font size, borders, colours, etc) and the second one is your app wide way
> of 'lightly emphasizing' something which in your case is to make it semi
> bold.
> >>>
> >>> Using this approach is better because you could change any attribute
> of the light emphasis style should you want to (eg maybe light emphasis
> nodes should have a soft yellow background as well as a semi bold font).
> >>>
> >>> It is a little naff that you have to set two styles in the code,
> effectively moving styling choices into the code where they don't usually
> belong (ie the decision to lightly emphasize something is in the code but
> typically should be in the CSS unless it's data driven).
> >>>
> >>> If we'd had a more OO style of styling you could have avoided this CSS
> leakage into code but now I'm starting to get on my rant. The way above is
> the standard web way (eg twitter bootstrap uses this heavily) and we've
> taken web land's model so we should probably take their strategies too.
> >>>
> >>>
> >>> On 18/08/2012, at 1:30 AM, Randahl Fink Isaksen <randahl at rockit.dk>
> wrote:
> >>>
> >>>> Yes Richard, I am able to load the font properly using code like this:
> >>>>
> >>>>     URL openSansSemiboldUrl =
> getClass().getResource("/fonts/OpenSans-Semibold-webfont.ttf");
> >>>>     Font openSansSemiboldFont =
> Font.loadFont(openSansSemiboldUrl.toString(), 12);
> >>>>
> >>>> The font is loaded just fine, and it even has properties telling that
> it is the semibold variant I have loaded.
> >>>>
> >>>> What I don't get is, why was the support for styling with these
> variants abandoned from JavaFX 1.x to 2.x? If you look here, you will see
> that constants like SEMI_BOLD, LIGHT etc. used to be supported:
> >>>>
> >>>>
> http://docs.oracle.com/cd/E17802_01/javafx/javafx/1.1/docs/api/javafx.scene.text/javafx.scene.text.FontWeight.html
> >>>>
> >>>> As Phil just mentioned, I can also style my App with the font using a
> full font name like this
> >>>> -fx-font-family: "Open Sans Semibold";
> >>>> But the problem with this approach is, I get the font family
> dependency spread out over all of my CSS code (many lines containing "Open
> Sans").
> >>>>
> >>>> In stead I was hoping to be able to just style my application using
> >>>> -fx-font-weight: semibold;
> >>>> thereby only choosing the "Open Sans" font once, and letting
> different part of my app use different weights.
> >>>>
> >>>> Again, I do not get why support for this was removed from JavaFX.
> >>>>
> >>>> Yours
> >>>>
> >>>> Randahl
> >>>>
> >>>>
> >>>>
> >>>> On Aug 17, 2012, at 16:50 , Richard Bair <Richard.Bair at oracle.com>
> wrote:
> >>>>
> >>>>> Are you able to get the font in Extrabold from within Java code?
> That is, do you know the problem is CSS or is it in the platform itself?
> >>>>>
> >>>>> Thanks
> >>>>> Richard
> >>>>>
> >>>>> On Aug 17, 2012, at 6:48 AM, Randahl Fink Isaksen wrote:
> >>>>>
> >>>>>> I noticed that the current CSS implementation only supports regular
> fonts, italic fonts, and bold fonts.
> >>>>>>
> >>>>>> Many modern fonts come in more variants – Open Sans, for instance,
> comes in variants
> >>>>>> Light, Regular, Italic, Light Italic, Bold, Extrabold, Semibold,
> Bold Italic, Extrabold Italic, and Semibold Italic.
> >>>>>>
> >>>>>> Have I overlooked something or am I right that it is impossible to
> style a JavaFX app using CSS and get one of these variants, say, Open Sans
> Semibold?
> >>>>>>
> >>>>>> Randahl
> >>>>>>
> >>>>>>
> >>>>>
> >>>>
> >>
> >
>
>
> David Grieve | Principal Member of Technical Staff
> Mobile: +16033121013
> Oracle Java Client UI and Tools
> Durham, NH 03824
>  Oracle is committed to developing practices and products that help
> protect the environment
>
>