Change font size in the captions?

Feb 10, 2011 at 11:04 AM

Hi,

Could someone tell me please if it is possible to change the font size of in-stream captions? I would like to increase the size if the user if the requires it.

Any help would be appreciated, as I cannot see a way to access the captions font size programatically. Maybe I am looking in the wrong place though.

Many thanks in advance!

 

 

 

Feb 14, 2011 at 3:21 PM

If this is not possible then is it possible to have captions sized proportionally?

May 17, 2011 at 11:00 AM

You can set it in the style definition in the captions stream. Have a look at the samplecaptions.xml in the Samples.Web project in the sources for the Player Framework.

A sample:

<style xml:id="backgroundStyle" 
        p5:fontFamily="proportionalSegoeUI" 
        p5:fontSize="15px" 
        p5:textAlign="left" 
        p5:origin="1% 86%" 
        p5:extent="98% 15%" 
        p5:backgroundColor="rgba(0,0,0,100)" 
        p5:displayAlign="center" 
        xmlns:p5="http://www.w3.org/2006/10/ttaf1#styling" />
May 17, 2011 at 11:09 AM

Thanks for the response. I was really looking to control this in the player rather than producing multiple captions streams.

As a work around I have put the Captions region inside a Viewbox, as the player size increase then so does the font.

Jun 24, 2011 at 10:44 AM
Edited Jun 24, 2011 at 10:46 AM

Hi,

What I did as a quick workaround was to hardcode a value in ..\SMFPlayer\Core\Accessibility\Controls\CaptionBlockRegion.xaml.cs

In the WrapElement function look for  

        if(!double.IsNaN(panelSize.Height)) textblock.FontSize = style.FontSize.ToPixelLength(panelSize.Height);

and insert the following code after it 

if (panelSize.Height < 57) textblock.FontSize = 12;           

if (panelSize.Height < 30) textblock.FontSize = 8;

 

It works ok for me.

Jun 24, 2011 at 4:48 PM

I modified the MapStyle method in TimedTextStyleParser

I stuck this at the bottom of the method.

 // set font size           

var parsedFontSize2 = GetNumberPair("22em");           

style.FontSize = new Length           

{               

Unit = FromUnit(parsedFontSize2.UnitMeasureHorizontal),               

Value = parsedFontSize2.First           

};

Nov 19, 2012 at 9:13 AM
Edited Dec 6, 2014 at 8:10 PM
your sample style writing:        p5:origin="1% 86%"        p5:extent="98% 15%" is a bit problematic in that when left=1% and top=86%, using a width=98% is fine (1+98+1=100), but a height of 15% isn't, since 86+15=101, more than 100% btw, is there any way to reverse the coordinate system there? I want to define the bottom part of the region and have it overflow dynamically upwards. I tried using a negative number for top in my source code (in case it was clever enough to consider it as bottom), but it didn't work Speaking of setting it in the code, here's the code I currently use in ClipFlair (http://ClipFlair.codeplex.com):

      public static void StyleCaptions(CaptionRegion theCaptions)     {       if (theCaptions != null)       {         theCaptions.Style.ShowBackground = ShowBackground.WhenActive; //doesn't seem to work if other than transparent color is used         theCaptions.Style.BackgroundColor = Colors.Transparent;         theCaptions.Style.DisplayAlign = DisplayAlign.Before; //align multirow catpions to top of region         theCaptions.Style.TextAlign = TextAlignment.Justify;         theCaptions.Style.Origin = new Origin() { Left = new Length() { Unit = LengthUnit.Percent, Value=0.1}, Top = new Length() { Unit=LengthUnit.Percent, Value=0.75} };         theCaptions.Style.Extent = new Extent() { Width = new Length() { Unit = LengthUnit.Percent, Value = 0.8 }, Height = new Length() { Unit = LengthUnit.Percent, Value = 0.2 } };         theCaptions.Style.WrapOption = TextWrapping.Wrap;         theCaptions.Style.Overflow = Overflow.Dynamic; //doesn't seem to extend the region when needed (and Overflow.Visible looks bad)         foreach (CaptionElement caption in theCaptions.Children)           StyleCaption(caption);       }     }     public static void StyleCaption(TimedTextElement theCaption)     {       if (theCaption != null)       {         theCaption.CaptionElementType = TimedTextElementType.Text;         theCaption.Style.ShowBackground = ShowBackground.WhenActive;         theCaption.Style.BackgroundColor = Color.FromArgb(100, 0, 0, 0); //use a semi-transparent background         theCaption.Style.Color = Colors.White;          Length length = new Length         {           Unit = LengthUnit.Pixel, //must use this, since the default LengthUnit.Cell used at TimedTextStyle constructor is not supported           Value = 20         };         theCaption.Style.FontSize = length;       }     }

I write about this at:
[http://zoomicon.wordpress.com/2012/09/03/howto-load-captionelements-into-silverlight-media-framework-player/]
Nov 19, 2012 at 10:17 AM

I managed to solve the issue I had with multirow captions that should show at the bottom and extend upwards into more row as needed, the trick is to set DisplayAlign = DisplayAlign.After and also to give a big Extend (I cover nearly the whole area of the player on both width and height) and set the region to Overflow = Overflow.Dynamic

 

    public static void StyleCaptions(CaptionRegion theCaptions)
    {
      if (theCaptions == null) return;
      
        theCaptions.Style.ShowBackground = ShowBackground.WhenActive; //doesn't seem to work if other than transparent color is used
        theCaptions.Style.BackgroundColor = Colors.Transparent;

        theCaptions.Style.DisplayAlign = DisplayAlign.After; //align multirow catpions to bottom of region
        theCaptions.Style.TextAlign = TextAlignment.Justify;

        theCaptions.Style.Origin = new Origin() { Left = new Length() { Unit = LengthUnit.Percent, Value=0.1}, Top = new Length() { Unit=LengthUnit.Percent, Value=0.1} };
        theCaptions.Style.Extent = new Extent() { Width = new Length() { Unit = LengthUnit.Percent, Value = 0.8 }, Height = new Length() { Unit = LengthUnit.Percent, Value = 0.8 } };

        theCaptions.Style.WrapOption = TextWrapping.Wrap;
        theCaptions.Style.Overflow = Overflow.Dynamic; //extends the area for the captions as needed, up to the given extent

        foreach (CaptionElement caption in theCaptions.Children)
          StyleCaption(caption);
    }

Nov 19, 2012 at 10:49 AM

a problem is that textwrapping seems to cut off some chars at the left and right, there was a padding option that I'll try to see if it fixes it or maybe make the region take up the whole width of the player

Nov 19, 2012 at 1:14 PM

Regarding my last comment, seems SMF has a bug with wrapping captions (will report it right after this post), it wraps caption text at the video boundary instead of at the caption region max boundary (as defined by Origin/Extend)

so a workarround is to set top to 0 for the origina and extend width to 100% for the caption region, but this won't work if you want to show cartoon-like bubbles on the video for some captions. If anyone can suggest a fix (or workarround so that I don't have to edit the sources) for that you're welcome

    private const double CAPTION_REGION_LEFT = 0; //0.05;
    private const double CAPTION_REGION_TOP = 0.05;
    private const double CAPTION_REGION_WIDTH = 1; //0.9; //SMF 2.7 has a bug here, it wraps caption text at the video boundary instead of at the caption region max boundary (as defined by Origin and Extend)
    private const double CAPTION_REGION_HEIGHT = 0.9;

    public static void StyleCaptions(CaptionRegion theCaptions)
    {
      if (theCaptions == null) return;

        theCaptions.Style.ShowBackground = ShowBackground.WhenActive; //doesn't seem to work if other than transparent color is used
        theCaptions.Style.BackgroundColor = Colors.Transparent;

        //set caption region (max) bounds
        theCaptions.Style.Origin = new Origin() { Left = new Length() { Unit = LengthUnit.Percent, Value = CAPTION_REGION_LEFT }, Top = new Length() { Unit = LengthUnit.Percent, Value = CAPTION_REGION_TOP} };
        theCaptions.Style.Extent = new Extent() { Width = new Length() { Unit = LengthUnit.Percent, Value = CAPTION_REGION_WIDTH }, Height = new Length() { Unit = LengthUnit.Percent, Value = CAPTION_REGION_HEIGHT } };

        //theCaptions.Style.Padding = new Padding() { Left = new Length() { Unit = LengthUnit.Percent, Value = CAPTION_REGION_LEFT }, Right = { Unit = LengthUnit.Percent, Value = 1-CAPTION_REGION_LEFT-CAPTION_REGION_HEIGHT }, Bottom = { Unit = LengthUnit.Percent, Value = CAPTION_REGION_TOP }, Top = { Unit = LengthUnit.Percent, Value = 1-CAPTION_REGION_TOP-CAPTION_REGION_HEIGHT } }; //this crashes Silverlight

        //theCaptions.Style.Direction = Direction.LeftToRight;
      
        theCaptions.Style.DisplayAlign = DisplayAlign.After; //align multirow catpions to bottom of region
        theCaptions.Style.TextAlign = TextAlignment.Justify; //horizontally center captions

        theCaptions.Style.WrapOption = TextWrapping.Wrap; //wrap too long captions to next row
        theCaptions.Style.Overflow = Overflow.Dynamic; //extends the area for the captions as needed, up to the given Extent

        foreach (CaptionElement caption in theCaptions.Children)
          StyleCaption(caption);
    }