<div class="form-inline column-3">
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ascent}</span>
      <input data-field="ascent" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.descent}</span>
      <input data-field="descent" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.linegap}</span>
      <input data-field="lineGap" type="number" class="form-control">
    </div>
  </div>
</div>


<div class="form-inline column-3">
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.usWinAscent}</span>
      <input data-field="usWinAscent" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.usWinDescent}</span>
      <input data-field="usWinDescent" type="number" class="form-control">
    </div>
  </div>
  <a href="#" id="setting-calc-metrics" class="form-group">${lang.calc}</a>
</div>
<div class="form-inline">
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.sTypoAscender}</span>
      <input data-field="sTypoAscender" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.sTypoDescender}</span>
      <input data-field="sTypoDescender" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.sTypoLineGap}</span>
      <input data-field="sTypoLineGap" type="number" class="form-control">
    </div>
  </div>
</div>



<div class="form-inline column-3">
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.sxHeight}</span>
      <input data-field="sxHeight" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.sCapHeight}</span>
      <input data-field="sCapHeight" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.yStrikeoutPosition}</span>
      <input data-field="yStrikeoutPosition" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.yStrikeoutSize}</span>
      <input data-field="yStrikeoutSize" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.underlinePosition}</span>
      <input data-field="underlinePosition" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.underlineThickness}</span>
      <input data-field="underlineThickness" type="number" class="form-control">
    </div>
  </div>
</div>
<hr>


<div class="form-inline column-4">
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySubscriptXSize}</span>
      <input data-field="ySubscriptXSize" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySubscriptYSize}</span>
      <input data-field="ySubscriptYSize" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySubscriptXOffset}</span>
      <input data-field="ySubscriptXOffset" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySubscriptYOffset}</span>
      <input data-field="ySubscriptYOffset" type="number" class="form-control">
    </div>
  </div>
</div>


<div class="form-inline column-4">
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySuperscriptXSize}</span>
      <input data-field="ySuperscriptXSize" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySuperscriptYSize}</span>
      <input data-field="ySuperscriptYSize" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySuperscriptXOffset}</span>
      <input data-field="ySuperscriptXOffset" type="number" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.ySuperscriptYOffset}</span>
      <input data-field="ySuperscriptYOffset" type="number" class="form-control">
    </div>
  </div>
</div>
<hr>

<div class="form-inline column-3">
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.achVendID}</span>
      <input data-field="achVendID" type="text" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.usWeightClass}</span>
      <select id="setting-weight" data-field="usWeightClass" data-type="number" class="form-control">${weightOptions}</select>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">${lang.usWidthClass}</span>
      <select id="setting-width" data-field="usWidthClass" data-type="number" class="form-control">${widthOptions}</select>
    </div>
  </div>
</div>

<label for="panose-bFamilyType">panose</label>
<div class="form-inline  column-3 panose-inline">${panoseOptions}</div>
</div>
