Firefox, Chrome won't display fonts in point size

[Daniel Walton]

I am using the editor for a customer who wants to design print documents, so I need all font sizing to be specified in points. In the toolsfile.xml I have set up a realfontsizes element with only point values specified:

  <realFontSizes>
    <item value="6pt"></item>
    <item value="7pt"></item>
...
  </realFontSizes>

This works fine for setting font sizes, and Internet explorer does a fine job of setting the dropdown value when you return to a span, but Firefox and Chrome always show the dropdown value in pixels, even though the underlying HTML shows the font-size style tag is set properly. This same behavior exists when I look at the RadEditor demo with FF and Chrome. I have a customer requirement to support these browsers.

Any ideas out there?

-Dan

[Rumen]

Hi Dan,

The information displayed in the RealFontSize dropdown header is returned by the browser's queryCommandValue method. Firefox, Safari and Chrome returns the font-size information in pixels. Internet Explorer returns the font-size in points. We do not plan for the time being to enhance the current mechanism of RealFontSize tool and to display in the dropdown header only values in pixels or points in all browsers because this can introduce unwanted side effects during the conversion from pixels to points.

What you can do in to enhance the code below which converts the pixel values to points. I found for you the following table that will be of great help for your scenario: Convert em,px,pt and % in css.

Here is the example

Copy Code

<script type="text/javascript">
function OnClientSelectionChange(editor, args)
{
    var tool = editor.getToolByName("RealFontSize");
     if (tool && !$telerik.isIE)
    {
            setTimeout(function()
            {
                var value = tool.get_value();

                switch(value)
                {
                case "16px":
                  value = value.replace("16px", "12pt");
                  break;
                case "34px":
                  value = value.replace("34px", "26pt");
                  break;
                case "48px":
                  value = value.replace("48px", "36pt");
                  break;
                }

                tool.set_value(value);
            }, 0);
    }
}
</script>
<telerik:RadEditor id="RadEditor1" runat="server" OnClientSelectionChange="OnClientSelectionChange">
    <RealFontSizes>
        <telerik:EditorRealFontSize Value="12pt" />
        <telerik:EditorRealFontSize Value="26pt" />
        <telerik:EditorRealFontSize Value="36pt" />
    </RealFontSizes>
    <Content>
        <span style="font-size: 26pt;">dasdasd</span>asdas <span style="font-size: 36pt;">dasdassdas </span>da<span style="font-size: 26pt;">sdasda</span>s
    </Content>
</telerik:RadEditor>

Please, note that this is just an example and you should complete it.


Kind regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Daniel Walton]

Thanks Rumen. That works. I modified your script so that it will work for any pixel value, in case anyone else runs into this issue:

<script type="text/javascript">
        function OnClientSelectionChange(editor, args) {
            var tool = editor.getToolByName("RealFontSize");
            if (tool && !$telerik.isIE) {
                setTimeout(function() {
                    var toolval = tool.get_value();
                    if (toolval.indexOf("px") != -1) {
                        var pointval = Math.round(parseInt(toolval) * 0.7568) + "pt";
                        tool.set_value(pointval);
                    }
                }, 0);
            }
        }
    </script>

Regards,
Dan Walton

[Rumen]

Hi Dan,

Thank you for sharing this modification.  I updated your Telerik points for that :)

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Josh Sudbury]

Hello,

I am having a similar issue with the font size needing to be in pt but showing up in px but my symptoms are different.

In my application I am using the rad editor and the Real Font Size control.

In every browser the font size list is showing as px.

Specificall I am testing in I.E. 8.0.7600.16385 , and Firefox 3.6.6.

I ran the JavaScript that Daniel provided and I was able to get all browsers to convert any selected value to pt. But the list still shows up in px, in all browsers.

So Is there a way to alter that JavaScript to access all the values in the list and convert them all to pt?

Also I found this :
http://demos.telerik.com/aspnet-classic/editor/examples/FontsAndFontSizes/DefaultCS.aspx

This demo clearly shows the font sizes in pt in the list but converts to px once selected, in both I.E. 8 and Firefox 3.6.6.

Is this because of the fact that it's an ASP.NET Classic control?

If so shouldn't it have the same problem as the ASP.NET Ajax control since the fonts are displayed as px due to a browser based issue?

I looked through the source code on that page and didn't see any special properties in the tools xml file, the properties of the control, or any JavaScript on the .ASPX page.

Any help would be greatly appreciated!

Thanks,
Josh

[Rumen]

Hi Josh,

By default, the RealFontSize dropdown is populated with font sizes with px values.
All you need to do is to repopulate the RealFontSize dropdown list with your own items with pt values, e.g.

ToolsFile.xml:

<root>
 <tools name="MainToolbar" enabled="true">
   <tool name="RealFontSize" />
 </tools>
 <realFontSizes>
   <item value="12pt"></item>
   <item value="18pt"></item>
   <item value="22pt"></item>
   ...
 </realFontSizes>
</root>

You can find more information in this help article: Real Font Sizes.

Best regards,
Rumen
the Telerik team

[Josh Sudbury]

Worked like a charm!

Thanks!

[sawyer]

In version Q1 2012 , is it necessary to use this method for convert px in pt or you have developped a new method to convert px to pt for Chrome, Firefox ?

Thank's

[Rumen]

Hi,

Yes, you need to use it, because if we integrate it, it could decrease the performance of multiple controls on the page.

Greetings,
Rumen
the Telerik team