"Press this" icon overlaps the text (RTL)

[rasheed]

Location: wp-admin/tools.php

Please check the attachment.

[ocean90]

Reproduced.

Related: #18000 / ​r19080

[dd32]

Works for me in Hebrew, as it has a short string, however has issues in Arabic (which has a long string).

The sprite doesn't seem wide enough for RTL, there needs to be extra room in the sprite between the hand icon and the PressThis icon. However I can't see whats actually using the hand icon part of the sprite.. Am I missing something?

(patch incoming)

[ocean90]

IRC log: ​https://irclogs.wordpress.org/chanlog.php?channel=wordpress-dev&day=2011-12-10#m343713

[dd32]

IRC log

Ah cheers, Hadn't got to IRC yet.

[dd32]

RTL on the Press This icons wasn't perfect in 3.2 either, but it didn't have an icon obscuring the text.

New image based on the fact that the Hand isn't used at all, would've liked to use blocks of 5px for positioning, but it doesn't quite work out like that for RTL offsets - Image is a crop of the one in core saved without compressed/colour/pixel alteration

The .pressthis a span width is required for RTL languages with a smaller character count - the span shrinks, which results in the icon being mis-placed, defined it globally for consistency.

Patch tested with Opera/IE/FF/Chrome (latest in all cases) with English, Arabic, and Hebrew

[azaozz]

Looks good.

[nacin]

Since we no longer enforce a width here ([20662]), the existing patch didn't quite work right.

By adding left and right margins of five pixels to the span, and decreasing the left and right paddings by five pixels, we get the same visual, but we no longer need a background x position of 5px. This enables us to then have a background x position of "right" in RTL.

Looks great regardless of text size.

[nacin]

In [20689]:

Fix the image overlap with the Press This bookmarklet in RTL. props dd32 for the initial patch. fixes #19502.