Glyphs rendering

05-11-2009 5:41 AM |

 Hi,

How does Glyphs gets rendered to a particular position inside a parent Canvas in Silverlight?

The documentation states that OriginX and OriginY are in pixels and refer to the position of Glyphs object but I tried to add a Rectangle around the Glyphs:

 Glyphs g = ....

Rectangle r = new Rectangle();
r.Width = g.ActualWidth;
r.Height = g.ActualHeight;
r.SetValue(Canvas.LeftProperty, g.OriginX );
r.SetValue(Canvas.TopProperty, g.OriginY - g.ActualHeight);

but it seems like the rectangle is not positioned correctly vertically, it has a small vertical offset.

How does the Silverlight framework position Glyphs vertically?

Thanks,

Re: Glyphs rendering

05-14-2009 6:07 AM |

I took an experiment, it's clumsy. Hope the result is useful to you.

some characters have tail ,eg. f g {, these tail will lay below the OriginY position, up down ratio is about 83:22.

I haven't test other character type, it may be also relevant.

xaml code here:

    <Grid x:Name="LayoutRoot" Background="Black">
        <Canvas Name="lr1">
            <Line X1="0" X2="1000" Y1="100" Y2="100" Stroke="White"/>
            <Line X1="0" X2="1000" Y1="200" Y2="200" Stroke="White"/>
            <Line X1="0" X2="1000" Y1="300" Y2="300" Stroke="White"/>
            <Line X1="0" X2="1000" Y1="400" Y2="400" Stroke="White"/>
            <Line X1="0" X2="1000" Y1="500" Y2="500" Stroke="White"/>
            <Line X1="0" X2="1000" Y1="600" Y2="600" Stroke="White"/>
            <Line X1="0" X2="1000" Y1="700" Y2="700" Stroke="White"/>
            <Line X1="0" X2="1000" Y1="800" Y2="800" Stroke="White"/>
            <Line Y1="0" Y2="1000" X1="100" X2="100" Stroke="White"/>
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="`1234567890-=" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="100" />
            
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="qwertyuiop[]\" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="200" />
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="qwertyuiop[]\" Fill="Orange" FontRenderingEmSize="72" StyleSimulations="None" OriginX="400" OriginY="200" />

            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="asdfghjkl;'" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="300" />
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="asdfghjkl;'" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="BoldItalicSimulation" OriginX="400" OriginY="300" />
            
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="zxcvbnm,./" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="400" />
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="~!@#$%^*()_+" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="500" />
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="QWERTYUIOP{}|" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="600" />
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="ASDFGHJKL:" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="700" />
            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="ZXCVBNMM>?" Fill="Orange" FontRenderingEmSize="48" StyleSimulations="None" OriginX="100" OriginY="800">

            <Glyphs FontUri="380C7692-7990-759D-5808-74216870264A.odttf" UnicodeString="gf{" Fill="Orange" FontRenderingEmSize="120" StyleSimulations="None" OriginX="500" OriginY="700" />
            <Line Stroke="White" X1="550" X2="650" Y1="617" Y2="617"/>
            <Line Stroke="White" X1="500" X2="600" Y1="722" Y2="722"/>
            <TextBlock Text="up down ratio is 83:22" Foreground="White" Canvas.Left="500" Canvas.Top="730"/>
        </Canvas>
    </Grid>

        void SilverlightControl45_Loaded(object sender, RoutedEventArgs e)
        {
            var list = new List();
            foreach (var ele in lr1.Children)
            {
                if (ele is Glyphs)
                {
                    var g1 = ele as Glyphs;
                    Rectangle r = new Rectangle();
                    r.Fill = new SolidColorBrush(Colors.Purple);
                    r.Width = g1.ActualWidth;
                    r.Height = g1.ActualHeight;
                    r.SetValue(Canvas.LeftProperty, g1.OriginX);
                    r.SetValue(Canvas.TopProperty, g1.OriginY - g1.ActualHeight);
                    r.SetValue(Canvas.ZIndexProperty, -1);

                    list.Add(r);
                }
            }
            for (int i = 0; i < list.Count; i++)
                lr1.Children.Add(list);
        }

Re: Re: Glyphs rendering

05-14-2009 7:06 PM |

 Thank you alot for your post and little research! I didn't think anyone would care to respond.

 Can you please tell me what was your logic when defining that ratio?

I don't think I understand what you mean by that ratio.

I see 83 pixels up from OriginY gives you the top of  'f' and '{'.

And 22 pixels down from OriginY give you bottom of 'g'

I don't think these offsets are the same for other fonts.

Also, I am thinking that the ActualHeight of the Glyphs is a correct value representing the height bounding of the characters. What do you think?

I am curious how the Windows XPS viewer application is able to find the bounding rectangle of characters when showing text selection.

Re: Re: Glyphs rendering

05-14-2009 11:41 PM |

My mistake, the actualheight is the right value and should be count in ratio calculation

I enumerate characters ,found that make the rectangle an offset down may fit glyphs in most scenarios, so the ratio is not meaningless.

Re: Re: Re: Glyphs rendering

05-15-2009 3:42 AM |

Can you please tell how the ActualHeight should be count in ratio calculation?

What do you think about different fonts with different heights?

Thanks alot for your input.