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

This issue has been created 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-09-30
Star Count 84080
Watcher Count 3064
Fork Count 22235
Issue Count 1197

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Apple Mail vs Default email reader 2 2022-07-29 2022-08-26
Request // Add option to insert specific add after x videos // Auto import videos to shedule 1 2022-01-21 2022-08-09
Feature Request: Live Stream Input Option 16 2022-01-18 2022-08-11
Question: Is there a way to have a single playlist every day? 2 2022-02-04 2022-08-28
Token Response Attribute `expires_in` Should be Optional 1 2022-09-15 2022-09-25
Add example integration with structlog 2 2022-03-18 2022-07-25
After asgi-correlation-id is used, the log cannot be printed when creating fastapi app 7 2022-03-12 2022-05-10
TypeError: cannot use a bytes pattern on a string-like object 3 2022-03-21 2022-08-18
The headers with same key are overwritten 11 2022-03-02 2022-08-30
TCMalloc LD_PRELOAD deadlock 3 2021-02-05 2022-08-03
allowlist doesn't seem to work 3 2020-10-05 2022-09-12
Option 'allowlist' is not supported. Did you mean 'allowlist'? 0 2021-01-07 2022-09-27
Error including local npm module 0 2021-01-23 2022-09-28
Publish Titiler as metapackage 2 2021-04-19 2022-08-12
Proposal: Share API/mechanic should be expanded to be similar to 'hack' 0 2022-01-19 2022-09-27
lua-hashings not working with imapfilter 2 2022-06-23 2022-07-21
[Annotate] Labels are not found when using cased searches 0 2022-01-05 2022-08-16
[Rule metrics] Table summary and rule metrics formats 3 2022-01-06 2022-06-11
[Search] Wrong search queries are not notified 0 2022-01-04 2022-08-16
Add support for multiple architectures, specifically arm64 and armhf, to the released docker image. 2 2021-02-25 2022-09-27
下载的模型放到哪个路径 Where should I put models in path? 5 2022-08-30 2022-09-25
DuplexClientBase<TChannel> 1 2022-06-22 2022-09-20
MODULE_NOT_FOUND in node git_data_fetcher.mjs 8 2022-07-06 2022-09-21
Remove the invoice address field for private users 1 2022-09-22 2022-09-20
deprecate workflow-cleanup-action 0 2022-03-23 2022-09-27
Add Tekton Dashboard 0 2021-03-18 2022-09-08
the Topic header of the request was not specified and was required 5 2017-11-08 2022-09-01
[BUG] First action result not affecting the next actions 3 2022-07-15 2022-09-14
Panel: Table onRowClick prop blocked when adding internal Panel component on some web browsers 5 2022-08-16 2022-08-26
C++20: invalid conversion from ‘const char8_t*’ to ‘const char*’ 2 2021-08-20 2022-09-16
Automated hardware testing 1 2022-06-27 2022-08-26
TlsException when loading GLTF From https URI 4 2019-03-22 2022-09-22
Feature Idea: The left navigation suggests adding a tree structure 0 2022-01-05 2022-08-31
COMPASS_LEARN=3 is not always reset to 0 0 2021-11-05 2022-07-15
FullNode.jar doesn't start without any error message 3 2022-07-14 2022-09-07
如何在 ViewModel 中发起请求,不传递上下文 Context? 3 2021-07-30 2022-09-15
tools: Allow adding new tools to "Go: Install/Update tools" 3 2022-06-13 2022-09-27
[Tests-Only][CI] Cancel Old running builds 2 2021-08-12 2022-07-28
Inconsistent eager vs delayed resolution of Cn in plot() 13 2018-12-10 2022-09-02
which version of socket.io.js should I use for netty-socketio 1.7.19? 2 2021-06-17 2022-09-28
Only stopChargeThreshold works (thinkpad w520) 3 2012-10-19 2022-08-30
Test keeps failing for an AJV-based middleware 2 2022-07-18 2022-09-22
Not installing the pacakage 0 2021-04-03 2022-09-20
[Usable - PowerToys Run]: It will be good if only search suggestion list gets closed on pressing ESC Key instead of closing entire search. 1 2021-11-09 2022-09-23
Agent does not correctly deal with cortex soft errors 0 2022-07-01 2022-08-16
half screen dialog 如何层级在原生组件和cover-view之上? 0 2021-03-31 2022-09-28
CVE-2017-11317 and CVE-2017-9248 not detected for Telerik.Web.UI 2014 0 2022-04-07 2022-08-31
[Bug]: Cannot overwrite margin-left and margin-right for cover block 0 2022-08-31 2022-09-14
Interference with Dynamic Imports 0 2017-11-13 2022-09-23
Failure when installing glog on M1 Mac 0 2022-06-06 2022-09-27