docs: Horizontal alignment issue in https://angular.io/guide/what-is-angular angular

This issue has been tracked since 2022-09-13.

Describe the problem that you experienced

Not a big issue, but thought I'd mention that there is a horizontal alignment issue in https://angular.io/guide/what-is-angular (angular / aio / content / guide / what-is-angular.md in angular:main).

The following pairs of text are not exactly horizontally aligned:

  • 'ng build' and 'Compiles an Angular app into an output directory.'
  • 'ng serve' and 'Builds and serves your application, rebuilding on file changes.'
  • 'ng generate' and 'Generates or modifies files based on a schematic.'
  • 'ng test' and 'Runs unit tests on a given project.'
  • 'ng e2e' and 'Builds and serves an Angular application, then runs end-to-end tests.'

Enter the URL of the topic with the problem

https://angular.io/guide/what-is-angular

Describe what you were looking for in the documentation

That the following pairs of text are exactly horizontally aligned:

  • 'ng build' and 'Compiles an Angular app into an output directory.'
  • 'ng serve' and 'Builds and serves your application, rebuilding on file changes.'
  • 'ng generate' and 'Generates or modifies files based on a schematic.'
  • 'ng test' and 'Runs unit tests on a given project.'
  • 'ng e2e' and 'Builds and serves an Angular application, then runs end-to-end tests.'
    Angular CLI

Describe the actions that led you to experience the problem

I went to https://angular.io/guide/what-is-angular and noticed the lack of horizontal alignment.

I'm including another screen shot from the same page because it also displays/illustrates the same lack of horizontal alignment.
First-party libraries

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

Angular CLI
First-party libraries

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

I had done a quick right-click and Inspect; it appears that the issue can easily be resolved if you eliminate the following line from _typography.scss:

    vertical-align: top;

What I don't know, though, is if doing that adversely affect anything else.

Having both columns be horizontally aligned along their centers would be the ideal.
dario-piotrowicz wrote this answer on 2022-09-15

Hi @abergquist I've created a PR for this I hope you don't mind 🙂

However I think that the right solution here is to use text-top instead of completely remove the vertical alignment, as your solution would change how the tables look (breaking the design).

What I mean is that this is how the tables look now:
Screenshot at 2022-09-15 22-34-35

This is how they look if we removed the vertical alignment:
Screenshot at 2022-09-15 22-34-52

(not that the vertical alignment is anyways lost when we have multiple rows)

And this is how they look with text-top:
Screenshot at 2022-09-15 22-35-08

I believe that this is the nicest way to fix your issue without breaking/changing the designs 🙂

What do you think? 🙂

dario-piotrowicz wrote this answer on 2022-09-15

by the way, also the removal of the vertical alignment can really create a big difference in other tables, for example here:
Screenshot at 2022-09-15 22-50-21

versus:
Screenshot at 2022-09-15 22-50-33

abergquist wrote this answer on 2022-09-15

Yes, dario-piotrowicz; yours is a wonderful idea. Can we go with that?

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84147
Watcher Count 3063
Fork Count 22247
Issue Count 1201

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date