Character Sheets and Alignment

[Duggan]

I'm working on my character sheet and I'm running into a minor issue of alignment. I want the fields left-aligned with the name without a border and the others with, but as you can see, all of them are getting a border, and only the value is left-aligned with the other fields centering for some reason. I'm displaying it all in an output_table, which does have outNormal set for its style, which has borders, but that doesn't explain why the alignment is different for one field.

<!-- simple text for output -->
  <style
    id="outNormal"
    border="bubble">
    <style_output
      textcolor="000000"
      font="ofntnormal"
      alignment="left">
      </style_output>
    </style>

<style
  id="outNormLt">
  <style_output
    textcolor="000000"
    font="ofntnormal"
    alignment="left">
    </style_output>
  </style>

<!-- left-aligned for output with border-->
<style
  id="outBNormLt"
  border="bubble">
  <style_output
    textcolor="000000"
    font="ofntnormal"
    alignment="left">
    </style_output>
  </style>

<portal
id="oCSkills"
style="outNormal">
  <output_table 
    component="Skill" 
    showtemplate="oSkillPick">
    <list><![CDATA[
      Skills.Combat 
      ]]></list>
    <headertitle><![CDATA[
      @text="Combat Skills"
    ]]></headertitle>
    </output_table>
</portal>

<template
  id="oSkillPick"
  name="Output Skills Table"
  compset="Skill"
  marginhorz="2"
  marginvert="2">

  <portal
    id="name"
    style="outNormLt">
    <output_label
      field="name">
      </output_label>
    </portal>

  <portal
    id="value"
    style="outBNormLt">
    <output_label
      field="trtFinal">
      </output_label>
    </portal>

  <portal
    id="special"
    style="outBNormLt">
    <output_label
      field="sklSpecs">
      </output_label>
    </portal>

  <position><![CDATA[
    ~our height is the height of the tallest portal
    height = portal[name].height
    doneif (issizing <> 0)

    ~position the name to the left and let it take up a third of the space.
    portal[name].left = 0
    portal[name].width = width / 3
    
    ~position the value to the right of that, and a ninth of the space
    portal[value].left = portal[name].right + 5
    portal[value].width = width / 9
    
    ~ Let the Specialties take up the rest of the space
    portal[special].left = portal[value].right + 50
    portal[special].width = width - portal[special].left

    ~size the name to fit the available space
    perform portal[name].sizetofit[20]
    perform portal[special].sizetofit[16]
    
    ~center all portals vertically
    perform portal[name].centervert
    perform portal[value].centervert
    perform portal[special].centervert
    ]]></position>

  </template>

 

[Mathias]

Test if commenting out your sizetofit lines will fix this. If so, change the order of operations - first, set the width of the portal, then size to fiit, then set the left-right position of the portal.

 

[Duggan]

Commenting out those lines fixes the alignment issue. Unfortunately, it comes back even when I follow your advice to size to fit at that location.

<position><![CDATA[
  ~our height is the height of the tallest portal
  height = portal[name].height
  doneif (issizing <> 0)

  ~position the name to the left and let it take up a third of the space.
  portal[name].width = width / 3
  portal[value].width = width / 9
  portal[special].width = width - portal[name].width - portal[value].width - 10

  ~ Resize fonts to make the values fit
  perform portal[name].sizetofit[20]
  perform portal[special].sizetofit[16]
  
  portal[name].left = 0
  
  ~position the value to the right of that, and a ninth of the space
  portal[value].left = portal[name].right + 5
  
  ~ Let the Specialties take up the rest of the space
  portal[special].left = portal[value].right + 5
  
  ~center all portals vertically
  perform portal[name].centervert
  perform portal[value].centervert
  perform portal[special].centervert
  ]]></position>

I may just have to select smaller font values as a standard and not use sizetofit...

 

[Mathias]

Try repeating your width declarations after sizetofit. I think sizetofit reduces the width to just what's needed (and apparently, it centers that within the original space), but I'm not sure why the border is still in the original place.

 

[Duggan]

Try repeating your width declarations after sizetofit. I think sizetofit reduces the width to just what's needed (and apparently, it centers that within the original space), but I'm not sure why the border is still in the original place.

Sizetofit should just be changing font sizes to fit the with, although I suppose alignment is another font thing.