Site-www: Fix CSS for external links, so punctuation can be outside the link

[kwalrath]

For more info, see #2210.

We should also make sure this is documented somewhere obvious, so contributors know what to do.

[nandithavalsaraj]

I'm a beginner with open source. I would like to take up this issue but wanted to confirm if this is still open.
Thanks!!

[kwalrath]

It's definitely still open, and I'd love for you to take on this issue!

[nandithavalsaraj]

Thanks @kwalrath

[joshuamwolfe]

Have a few weeks till class restarts I’ll take a crack.

[lukelima]

hey @joshuamwolfe are you still doing it ? If not, can I be assigned to this issue ?

[joshuamwolfe]

I was not expecting to be accepted to springboard boot camp I don't have the time that I thought I did. Yes it can be reassigned.

[lukelima]

Thanks for reporting it, @joshuamwolfe !

Hey @kwalrath ! Could you assign it to me ?

[kwalrath]

Hey @kwalrath ! Could you assign it to me ?

Done. Thank you for volunteering!

[nathan-king]

Hey @kwalrath, I can get this done if still open :)

[kwalrath]

Hey @kwalrath, I can get this done if still open :)

I haven't heard anything form @lukelima, so let's pass the baton to you, @nathan-king!

[kwalrath]

I'm starting to think this isn't going to happen, but I'd be very happy for you to try, @f3ve! The baton is yours.

[kaaaartikkkk]

Hey, can I know if I can get this done?

[joshuamwolfe]

Just give it a try, at worst, you learned something new!

On Tue, Jul 21, 2020 at 10:01 AM kaaaartikkkk [e-mail]
wrote:

Hey, can I know if I can get this done?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/dart-lang/site-www/issues/2211#issuecomment-661879784,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AGJOC3MZQIBLOLPRBMVBQG3R4WNT3ANCNFSM4KFPLB2Q
.

[thomasmelak]

I am new to open source and I'd like to fix this issue but I don't know which file I should fix can you guys help?

[kwalrath]

What would be great would be for someone to provide the CSS. I can stick it into the necessary file (probably https://github.com/dart-lang/site-www/blob/master/src/_assets/css/main.scss), but I don't know what CSS to use.

You could test your CSS changes against one of the places that (erroneously) doesn't have the punctuation inside the external link. E.g. look at the "AngularDart" link at https://dart.dev/faq#q-what-web-frameworks-can-i-use-with-dart. It looks like this, with an unfortunate gap between the word and the punctuation:

Our current (awkward) solution of including the punctuation in the link makes these links look like this one in https://dart.dev/guides/libraries/library-tour#darthtml:

I'd love for the punctuation to be outside of the link, but with the external link marker very close. This solution would need to work well not only with commas and periods, but with taller punctuation such as colons (:) and possibly (lower priority because these are rare) exclamation points (!) and question marks (?).

[laurameck]

👋 Is this still available? I'd like to work on this.

[laurameck]

Had some thoughts after debugging this in the browser a bit. If you change the styling of the icon to be absolute, you can make the punctuation appear right after the text content when it's outside the link. However, this also makes it so that any following content won't know about the icon, and you'd need a way to determine where to add extra spacing.

For example, in your previous example, the content after the link is . During [...]. We want the period to ignore the icon, but we want to make sure that During is far enough apart that the icon and content don't overlap. Because most of the markup content following a link doesn't have a unique class, it would be pretty tricky to determine how to account for the icon's spacing considering we don't want the punctuation pushed over, but we _do_ want other types of text content to shift.

I looked into how Wikipedia handles this, and it appears that they actually use an SVG background image of the "icon" and then the padding on the link itself accounts for this spacing. Here's a code snippet of Wikipedia:

    background-image: url(external link svg is here);
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 13px;

If the icon being used could be made available as an SVG, I could implement it similarly to Wikipedia.

[kwalrath]

Thanks for taking a look, @laurameck! Can you point me to a representative page in Wikipedia?

[laurameck]

Sure thing, if you scroll to the bottom of this article, you can see the external links under the References section

[kwalrath]

That's interesting. They still have the punctuation afterward (so there's still a gap), but because the symbol is aligned on the baseline, the gap isn't noticeable/objectionable.

I'm not sure whether we must/should use an SVG icon (assuming the font could be on the baseline), but it looks like we could _get_ it from the material icons site: maybe open_in_new (SVG).

[laurameck]

Good catch--here's what it looks like with the vertical-align set to baseline

Period outside of link:

Period inside of link:

Does that look acceptable?

[kwalrath]

If we set vertical-align to baseline, LGTM, and we can (over time) stop including the punctuation in the link.

Would you be able to create a PR for the vertical-align change, @laurameck?

[laurameck]

Sure thing! I'll get a PR up shortly.

On Fri, Oct 2, 2020 at 17:56 Kathy Walrath [e-mail] wrote:

>
>

If we set vertical-align to baseline, LGTM, and we can (over time) stop
including the punctuation in the link.

Would you be able to create a PR for the vertical-align change, @laurameck
https://github.com/laurameck?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/dart-lang/site-www/issues/2211#issuecomment-703005847,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACMCOFXFXCT2I2K2XSSSSULSIZSEBANCNFSM4KFPLB2Q
.