Add Modern Text Rendering Optimizations

[AkaHarshit]

Add Modern Text Rendering Optimizations

Summary

This PR adds three modern CSS properties to the :root selector to improve text rendering quality across different browsers and operating systems. These optimizations are commonly used in modern CSS resets and enhance readability without introducing breaking changes.

Problem

Modern CSS resets often include text rendering optimizations that improve how fonts are displayed across different browsers and operating systems. Currently, reseter.css lacks these optimizations, which can result in:

• Suboptimal text rendering on WebKit-based browsers (Safari, Chrome)
• Inconsistent font smoothing on Firefox/macOS
• Missed opportunities for improved typography rendering

Solution

Added three CSS properties to the :where(:root) selector in src/components/global.scss:

1. -webkit-font-smoothing: antialiased - Improves text rendering on WebKit browsers (Safari, Chrome, Edge) by enabling subpixel antialiasing
2. -moz-osx-font-smoothing: grayscale - Improves text rendering on Firefox/macOS by using grayscale antialiasing instead of subpixel rendering
3. text-rendering: optimizeLegibility - Enables better kerning and ligature rendering for improved typography

Before vs After

Before

:where(:root) {
  line-height: 1.5;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

After

:where(:root) {
  line-height: 1.5;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

Testing/Validation

• ✅ Code follows project's coding style (2-space indentation, consistent formatting)
• ✅ Changes are non-breaking (additive only)
• ✅ SCSS syntax is valid
• ✅ Properties are placed logically within the :root selector
• ✅ No linter errors introduced

Manual Testing Recommendations

1. Visual Testing: Compare text rendering before and after on:

   • Safari (macOS/iOS) - should see improved antialiasing
   • Chrome/Edge - should see improved antialiasing
   • Firefox (macOS) - should see improved grayscale rendering
   • Various font sizes and weights

2. Cross-browser Testing: Verify no visual regressions in:

   • Chrome/Edge (latest)
   • Firefox (latest)
   • Safari (latest)
   • Mobile browsers (iOS Safari, Chrome Mobile)

3. Performance: These properties have minimal performance impact and are widely used in production.

Why This PR Should Be Merged

1. Industry Standard: These properties are commonly included in modern CSS resets (Normalize.css, Sanitize.css, etc.)
2. Non-Breaking: The changes are purely additive and don't modify existing behavior
3. Improves UX: Better text rendering enhances readability and user experience
4. Small & Safe: Minimal code change (3 lines) that's easy to review and maintain
5. Cross-Browser: Addresses rendering inconsistencies across different browsers
6. Modern Best Practice: Aligns with current CSS reset best practices

Additional Notes

• These properties are well-supported in all modern browsers
• The properties are vendor-prefixed where necessary for maximum compatibility
• text-rendering: optimizeLegibility may have a slight performance impact on very large documents, but the trade-off for better typography is generally considered worthwhile
• All properties are applied to :root using the :where() pseudo-class, maintaining the project's low-specificity approach

Summary by CodeRabbit

• Style
  • Improved global text rendering and font smoothing for enhanced visual quality across the application.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

Walkthrough

Added three CSS properties for text rendering optimization to the root selector: -webkit-font-smoothing: antialiased, -moz-osx-font-smoothing: grayscale, and text-rendering: optimizeLegibility in the global styles.

Changes

Cohort / File(s)	Summary
Global styling enhancements src/components/global.scss	Added font-smoothing and text-rendering properties (-webkit-font-smoothing, -moz-osx-font-smoothing, text-rendering) to :where(:root) selector for improved text rendering.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 With whiskers twitching and care most keen, I've smoothed the text with antialiased sheen, From browser to browser, the glyphs now gleam, Typography's polish fulfills the dream! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: adding CSS text-rendering optimization properties to improve cross-browser text rendering.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e89f83bae5c831700704ac7591ac3e3cb5647acd and 3aa49f0e0fff93b513365cede23a8981c810a71e.

📒 Files selected for processing (1)

• src/components/global.scss (1 hunks)

🔇 Additional comments (1)

src/components/global.scss (1)

13-15: ✓ Text-rendering properties correctly implemented.

The three vendor-prefixed and standard CSS properties are correctly specified, logically ordered (vendor prefixes followed by standard property), and appropriately placed in the low-specificity :where(:root) selector for global application. Indentation is consistent with the project style (2-space).

The trade-off of potential rendering performance cost from text-rendering: optimizeLegibility on very large documents is acceptable for typical use cases and is appropriately acknowledged in the PR context.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}