Add support for HTML&CSS Font Reader for Native

[linshun]

It uses HTML or CSS to create a string, which may save to json/xml file. Cocos2d-html5 supports this feature natively, so it only needs a reader for JSB/Native.

[ricardoquesada]

@linshun Could you add an example ? Thanks.

[Wu-Hao]

Let me try to draft the idea for CSS defined text. lets call it CCLabelCSS in this context

First we define the font style

.BoldFont{
    font-weight: bold;
}

this defines a CSS class called BoldFont, a CSS class can apply to many elements, and an element can have many classes, all taking effect, if same property is defined twice, the later class will take effect

First we need a css parser to read that .BoldFont class. Then we can create texts like

var text = cc.LabelCSS.create("my text", "BoldFont");

it should also supports these 3 functions

text.hasClass("BoldFont");// returns true
text.removeClass("BoldFont");
text.addClass("BoldFont");

to create a text with multiple css class, we should stick to css's way

// create some text with BoldFont and pink class
var text = cc.LabelCSS.create("my text", "BoldFont Pink");

This all looks good, but where do we draw the line as to "How much CSS property are we gonna implement" take a look at a common css declaration

.SomeClass{
    /* Font size has many units, px = pixels, pt = points, em = scale as to current size, pc = pica
        cm, mm, in = Centimeters, millimeters, inches... etc */
    font-size: 14px; 
    /* Font fallbacks, We need to determine if we have those fonts available, 
      Note it supports both with quotation mark and without. It also know if a font is a sans type, monospace, etc. */
    font-family: Arial, "Arial Black", Sans;
    /* Text color can be expressed in many way, in hex code, rgba, english words such as "black" */
    color: #FA07B3;

The above are only a few of the font css, there are much more, check it out at w3Schools

personally, I'll love to see CSS style for text, but i think its too difficult to implement right, what do you guys think?

[vlidholt]

What would the use case be for this that is not already handled by LabelTTF? How would this tie in with the work Carlo is doing on 'on-demand-bitmap-fonts': #15 ?

[ricardoquesada]

@vlidholt Yes, it is related to that feature. Instead of specifying all possible parameters via API, the idea is to specify them in a CSS compatible way. But since the CSS spec is huge, this feature is in "it would be nice to have".

Another alternative is to have a sanitizer in the publisher. eg:

before the publisher

.SomeClass{
    font-size: 14em; 
    color: 'white';
}

After the publisher

.SomeClass{
    font-size: 12px; 
    color: #ffffff;
}

And the publisher works off-line and could throw errors in case it cannot convert some of those parameters.