[UI/UX] Invalid CSS for Line Height

[CodeBySayak]

Description

The RhythmRuler widget sets an invalid CSS value for the line-height property due to incorrect spacing in the percentage unit.

---

Current Behavior

In rhythmruler.js (around line 737), the following code is used:

rulerSubCell.style.lineHeight = 60 + " % ";

This produces the string:

"60 % "

This is not valid CSS, as percentage values must not contain whitespace between the number and the % symbol. Because of this:

• Browsers may ignore the property entirely
• The line height falls back to default behavior
• DevTools may show "invalid property value"

---

Expected Behavior

The line-height should be applied correctly using a valid CSS value:

rulerSubCell.style.lineHeight = "60%";

This ensures:

• Proper vertical alignment of text inside rhythm cells
• Consistent rendering across browsers
• No CSS validation warnings

---

Proposed Approach (Optional)

Update the implementation to remove unnecessary whitespace and use a properly formatted string:

rulerSubCell.style.lineHeight = "60%";

Alternatively, if dynamic calculation is needed:

rulerSubCell.style.lineHeight = `${60}%`;

---

Environment

• Operating System: macOS (also reproducible on other platforms)
• Browser: Chrome (likely affects all modern browsers)
• Version of Software/Project: Latest (master branch)

---

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided enough information to understand the issue.
• I am willing to contribute to the resolution of this issue.

---