Member Avatar for tefflox

What I need

Protein      8g   25%
Fiber        1g    3%
<a><span style="float:right">8g &nbsp; &nbsp; 25%</span> Protein</span></a>
<a><span style="float:right">1g &nbsp; &nbsp; 3%</span> Fiber</span></a>

This code doesn't work when the percent values differ. It makes all the gram values ragged. Can you help me with this?

  • 3 Contributors
  • 7 Replies
  • 100 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The ragged grams happen because the numeric pieces (grams and percent) are not placed in fixed logical columns, so when the percent column grows the grams shift. already has server-side formatting working; is right that a table is a good fit — nutrition facts are tabular data and should use a real table for semantics and accessibility. Two practical, modern options follow: a semantic table (best for real data) or a CSS Grid/list if a table is not desired.

HTML (semantic table) and CSS notes:

<table class="nutr">
  <tbody>
    <tr>
      <th scope="row">Protein</th>
      <td class="num">8 g</td>
      <td class="pct">25%</td>
    </tr>
  </tbody>
</table>
.nutr { border-collapse: collapse; width:100%; }
.nutr .num, .nutr .pct {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* keeps digits monospaced */
  min-width: 3ch;                     /* reserves space sized to digits */
  padding-left: .4rem;
}

Alternative (CSS Grid on a list):

<ul class="nutri">
  <li><span class="label">Protein</span><span class="num">8 g</span><span class="pct">25%</span></li>
</ul>
.nutri { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; list-style: none; padding:0; margin:0; }
.nutri .num, .nutri .pct { text-align:right; font-variant-numeric: tabular-nums; min-width:3ch; white-space:nowrap; }

Testing tips and cautions: prefer font-variant-numeric: tabular-nums for stable digit widths (fallback to a monospace font for very old browsers). Avoid aligning with inserted spaces or nonbreaking spaces; those collapse or break responsiveness. Include proper <th scope="row"> for screen readers when using a table.

Resources: MDN on tabular numerals (font-variant-numeric) (https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric), CSS Grid Layout guide (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout), and WAI accessible tables tutorial (https://www.w3.org/WAI/tutorials/tables/).

Recommended Answers

All 7 Replies

Member Avatar for wickedsunny

im not sure wht ur trying to ask buddy please elaborate

Member Avatar for tefflox

I need this

_1g____1%
_2g___10%
34g__100%

where the "_" characters are blank spaces.

Member Avatar for tefflox

even better

___1g_____1%
___2g____10%
__30g___100%

instead of

___1g____1%
_20g____20%
___5g____5%

Member Avatar for tefflox

I can write sprintf commands in Ruby.. sprintf "Protein %3.1fg%4.0f%%", @grams, @daily_value Unfortunately, html doesn't pick up the spacing outside a <pre> element, and my css doesn't like what I'm trying to do with the <pre> element.

Member Avatar for MidiMagic

Use the style text-align: right; .

This is a good place to put in a table with no borders.

Member Avatar for tefflox

you mean like this? Protein <table><tr><td>2 g</td><td>5%</td></tr></table>

Member Avatar for MidiMagic

Yes. Then apply a style to the td tag that aligns the text to the right.

<style type="text/css">
.rt {text-align: right;}
</style>
.....
<table>
  <tr>
    <td>Protein</td>
    <td class="rt">8g</td>
    <td class="rt">25%</td>
  </tr>
  <tr>
    <td>Fiber</td>
    <td class="rt">1g</td>
    <td class="rt">3%</td>
  </tr>
</table>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.