locked
Grid alignment and the text baseline

    Question

  • In Sam Moreau's "Designing Metro style: principles and personality" talk at build (APP-395T), he talked a bit about the grid that Metro style apps should use for layout. We're supposed to align things with a grid whose cells are 20x20 pixels.

    As far as I can tell, when it comes to textual content, the Metro grid tells us where to put the text baseline. (At least, that's how it looked from the screenshots in that talk.) But as far as I can tell, there's not a huge amount of support for this in the layout system. The layout system seems to work with a TextBox's bounding box - it's not clear how to tell the layout system to put the baseline at a particular position.

    Are we just supposed to tweak things until it's correctly aligned? Or is there a declarative way to say "I want the baseline here, please position the TextBox wherever it needs to go to make that happen"?

    Monday, September 26, 2011 9:45 AM

Answers

  • I have some information (a parsing of various answers from internal sources) but I am not sure if it fully answers the question:

    ====================

    I don’t believe there is an easy way to do this, at least not now.

    From the WWA side, we do have typographic stylesheets where we provide predefined font sizes and line heights that will fall on the grid lines (e.g. 42pt Segoe UI will have a line height of 80px, falling on the 20px grid). So if you use this styling, and you place you text box such that the first line is on a gridline, your subsequent lines of text will be baseline aligned (provided you have homogenous text styles within a text box).

    XAML doesn’t have any similar to typographic stylesheets. A TextBlock does have a BaselineOffset value which gets you the baselineoffset for the first line, but using that would require code.

     

     


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Monday, October 10, 2011 2:07 PM
    Moderator

All replies

  • Hi Ian - I'll try to get some feedback on this for you.
    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Tuesday, September 27, 2011 7:33 PM
    Moderator
  • I'd love to see some out of the box support for the standard grid too. 

    On a related note -- the grid cell size in the Metro XAML editor seems to be 8x8. The Metro grid is 20x20 sub-divided into 5x5 cells though, and I can't find any setting in Visual Studio to change the grid size in the XAML editor. There's a grid size setting for the Windows Forms editor, but that doesn't affect the XAML editor. 

    So, count another vote for "please add better support for the Metro grid to the toolset". Thanks!

     

      


    • Edited by Adam Alpern Friday, September 30, 2011 7:06 AM
    Friday, September 30, 2011 7:05 AM
  • The XAML editor grid is officially not configurable in this preview - see the answer from Microsoft in this thread: http://social.msdn.microsoft.com/Forums/en-US/toolsforwinapps/thread/b78934b6-b68d-419c-b1b1-5a5ed4a0b56b
    Friday, September 30, 2011 2:00 PM
  • This got marked as an answer, but it's only an answer to the followup question that Adam Alpern's asked later in the thread. It doesn't answer the original question.

    I wrote the original question, and also the reply that was nominated as an answer. I definitely don't think I've answered my own question here. So Matt, I'd still very much like to see the feedback you offered to get on this.

    Monday, October 3, 2011 7:12 PM
  • Sure - my mistake.  I'll see where we are with this issue and respond when I have it.
    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Tuesday, October 4, 2011 2:15 PM
    Moderator
  • I'm still waiting on feedback from the right person for this.  I'll update as soon as I can.
    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Thursday, October 6, 2011 7:18 PM
    Moderator
  • I have some information (a parsing of various answers from internal sources) but I am not sure if it fully answers the question:

    ====================

    I don’t believe there is an easy way to do this, at least not now.

    From the WWA side, we do have typographic stylesheets where we provide predefined font sizes and line heights that will fall on the grid lines (e.g. 42pt Segoe UI will have a line height of 80px, falling on the 20px grid). So if you use this styling, and you place you text box such that the first line is on a gridline, your subsequent lines of text will be baseline aligned (provided you have homogenous text styles within a text box).

    XAML doesn’t have any similar to typographic stylesheets. A TextBlock does have a BaselineOffset value which gets you the baselineoffset for the first line, but using that would require code.

     

     


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Monday, October 10, 2011 2:07 PM
    Moderator
  • I have some information (a parsing of various answers from internal sources) but I am not sure if it fully answers the question:

    ====================

    I don’t believe there is an easy way to do this, at least not now.

    From the WWA side, we do have typographic stylesheets where we provide predefined font sizes and line heights that will fall on the grid lines (e.g. 42pt Segoe UI will have a line height of 80px, falling on the 20px grid). So if you use this styling, and you place you text box such that the first line is on a gridline, your subsequent lines of text will be baseline aligned (provided you have homogenous text styles within a text box).

    XAML doesn’t have any similar to typographic stylesheets. A TextBlock does have a BaselineOffset value which gets you the baselineoffset for the first line, but using that would require code.

     

     


    Matt Small - Microsoft Escalation Engineer - Forum Moderator


    Whilst this answers the original question quite completely, it's obviously not going to be considered satisfactory. The excitement and passion shown by presenters at the //build/ conference isn't being backed up with a solid set of features.

    Being able to create an attractively type-set apps is a very basic requirement. If you want users to "love" them, developers need to be able to design them... so, OK, we can design them... just not with the tools we are given. I can pencil-and-paper a beautiful, typographically consistent app but not being able to roll it out in Blend means that I'm either going to spend extra time writing code to make sure my app looks great, or I'm just going to compromise on quality to push my app out much sooner.

    In these days of massive competition, time-to-market is a huge factor.

    Friday, October 14, 2011 3:59 PM