Firefox, Chrome won't display fonts in point size

9 posts, 1 answers
  1. Daniel Walton
    Daniel Walton avatar
    18 posts
    Member since:
    Feb 2010

    Posted 16 Mar 2010 Link to this post

    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


  2. Answer
    Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 17 Mar 2010 Link to this post

    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.
  3. Daniel Walton
    Daniel Walton avatar
    18 posts
    Member since:
    Feb 2010

    Posted 17 Mar 2010 Link to this post

    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


  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 17 Mar 2010 Link to this post

    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.
  5. Josh Sudbury
    Josh Sudbury avatar
    10 posts
    Member since:
    Apr 2010

    Posted 29 Jun 2010 Link to this post

    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



  6. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 02 Jul 2010 Link to this post

    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
    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
  7. Josh Sudbury
    Josh Sudbury avatar
    10 posts
    Member since:
    Apr 2010

    Posted 06 Aug 2010 Link to this post

    Worked like a charm!

    Thanks!
  8. sawyer
    sawyer avatar
    13 posts
    Member since:
    Jun 2007

    Posted 20 Mar 2012 Link to this post

    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

  9. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 21 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top