Request: Support for specifying Font Size using alternative methods (px, em, css)

[techmag]

The font sizing as flexible in that you can add any number of elements to the list but they all render as "html" sizes

"html" per http://www.w3.org/TR/CSS2/fonts.html#font-size-props

Is it presently possible to use alternate forms of specifying the font sizes?

Could this be hacked into an implementation somehow?

[codewithtyler]

I'll check on this and will get back to you.

[codewithtyler]

As you know the document.execCommand() only has a limited selection of commands available for us to use. One of the commands available is the fontSize command. Here is the information listed on that command:

fontSize
Changes the font size for the selection or at the insertion point.
This requires an HTML font size (1-7) to be passed in as a value argument.

In the simple-toolbar.html example you'll see that we are already using font sizes this way.

<div class="btn-group">
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a data-edit="fontSize 5" class="fs-Five">Huge</a></li>
        <li><a data-edit="fontSize 3" class="fs-Three">Normal</a></li>
        <li><a data-edit="fontSize 1" class="fs-One">Small</a></li>
    </ul>
</div>

It looks like the font sizes 1-7 correlates to the HTML font sizes given in the first table on the page you linked to earlier.

[techmag]

I saw all that - my use case here (exam creation using the PearsonVue QTI specification) requires font sizes in px and my UI use case is end users (exam writers) have no idea what Html sizes mean.

While yes we're going inductive by providing the actual pickable sizes nonetheless we're going to need finer grained control as we have specifications to match like "font size is 12 point".

Not your problem -- it's mine I know :)

Will look at what we uncovered with the customized insertHtml method. I think I can make that work. Just trying to grok how to connect the picklist to the action -- once I get that I'll be all set. The rest is just grunt work...

[codewithtyler]

Try looking over the information on this page. It matches the font sizes to their respective sizes in pt. So you can still use the fontSize 5 in your code you'd just make the text that the user sees say 18pt.

[codewithtyler]

@techmag did that help you resolve your issues?

[techmag]

Actually no it does not -- I did try factional values but they get rounded so it ends up being too coarse grained for trying to match point sizes.

I'm getting used to writing custom validations in JSoup as the QTI spec is NOT valid HTML so I suspect I'll just accomplish using a similar process.

I'm also getting better at reading JS and starting to understand more of what is actually happening so one way or another I'll make it work.

[codewithtyler]

What are you looking for? Are you wanting more font sizes available? If so there's these two font size charts found here and here.

or are you wanting something else?

[codewithtyler]

@techmag is there anything further that I can do to help you regarding this issue?

[techmag]

Hey thanks for asking but no -- I see the brick wall and what needs to be done and I'm amping up my JS chops to be able to tackle it. Time (or a time machine) is all I need!

[codewithtyler]

@techmag Is this something that will need to be changed in the bootstrap-wysiwyg project or is this something that will have to be done on your end?

[techmag]

I think I might be able to work it back into bootstrap-wysiwyg (or might have to actually) however I need to get it working first before I decide if that is the intelligent thing to do or not.

[codewithtyler]

Alright, just let me know if there's anything I can do to help. Also keep an eye out on the repo during the next week or so as I hope to have my PR ready with the unit tests. That way as you work on this feature you'll be able to test and make sure it doesn't break an existing feature.

[steveathon]

Hey @techmag did you get far with this?

[techmag]

Still frying much bigger fish. I do have the editor running in a couple of production containers but I had to drop font size in one due to downstream requirements. The other container is just used for direct presentation on the web so what we had was good enough (for now). Will hopefully loop back round and tackle this again at some point but no longer a show stopper for me right now.

[OctavioSI]

Hi all -- since I was also in need of an implementation of different font-size attributes using this, I used a somewhat "ugly" fix for this issue. In my case, I needed to scale the font-size with the virtual width of my window to keep font proportion should anyone resize the browser. If anyone can think of an easier fix or have any opinion on this, I've changed the bootstrap-wysiwyg.js as follows:

     Wysiwyg.prototype.execCommand = function( commandWithArgs, valueArg, editor, options, toolbarBtnSelector ) {
        var commandArr = commandWithArgs.split( " " ),
            command = commandArr.shift(),
            args = commandArr.join( " " ) + ( valueArg || "" );

        var parts = commandWithArgs.split( "-" );

        if ( parts.length === 1 ) {
            document.execCommand( command, false, args );
            if(command === "fontSize"){ //ajuste para o font-size
                var fontElements = document.getElementsByTagName("font");
                for (var i = 0, len = fontElements.length; i < len; ++i) {
                    switch (fontElements[i].size) {
                        case "4": // Title font
                            fontElements[i].removeAttribute("size");
                            fontElements[i].style.fontSize = "1.2vw";
                            break;
                        case "3": //Subtitle font
                            fontElements[i].removeAttribute("size");
                            fontElements[i].style.fontSize = "1.2vw";
                            break;
                        case "2": //Text
                            fontElements[i].removeAttribute("size");
                            fontElements[i].style.fontSize = "0.9vw";   
                            break;
                    }
                }                
            }
        } else if ( parts[ 0 ] === "format" && parts.length === 2 ) {
            document.execCommand( "formatBlock", false, parts[ 1 ] );
        }

        ( editor ).trigger( "change" );
        this.updateToolbar( editor, toolbarBtnSelector, options );
     };

Please note that in my specific case, I have also changed other attributes according to the list found here: http://www.w3schools.com/jsref/dom_obj_style.asp

Also, in my example, this will affect other parts of your text if you use fonts 4, 3 or 2.

I hope this helps if anyone is having the same issue, and please let me know if you have a nicer solution for this.

[andrews05]

A quick and easy way (though not necessarily the best way) that I've been dealing with this is just by using CSS overrides, e.g.:

#my-editor font[size='3'] {
    font-size: 14px;
}

[spreadred]

@techmag I have added functionality to allow users to specify font size in either "pixels" or "points" in addition to the existing "size" to my fork: 17242ff25c282ba88c99e71b5b678d041a36f580