Changing the size of the sideways chevron that appear with "next" and "prev"

[MarchandMD]

Is it possible to change the size of the sideways chevron? If so, how? (It might also be called a Single Right-Pointing Angle Quotation Mark?

[benkoshy]

If you want fine grained customization (i.e. to change the size of the chevron but leave the "next" the same size - here are some ideas that come to mind:

Use a template:

e.g. for svg etc. consider adopting a template:

https://ddnexus.github.io/pagy/docs/how-to/#using-your-pagination-templates

Use another html character instead of >

If you are ok changing the chevron to another html character, you should be able to do this via simply changing the locales file to another character - i.e. target this :

pagy/lib/locales/en.yml

Line 11 in 00f166a

next: ">"

Use CSS?

Or thinking out of the box: you could target the page-item next with css?

....that's all I can think of

[MarchandMD]

Using a template seems to be overkill in this use case; We only need to make the chevron larger, while leaving "Next" and "Previous" the same font-size.

The design standards we must adhere to do not permit changing the character, unfortunately :(

Using CSS might work, however, the version of Pagy being used renders previous and next as a combination of the word + chevron.

I've tried changing the locales/en.yml to be "Next" and adding .next a::after with a unicode chevron, which almost works....but it removes whitespace between the word and symbol

Perhaps JS is the way to go....

[ddnexus]

Is it possible to change the size of the sideways chevron? If so, how? (It might also be called a Single Right-Pointing Angle Quotation Mark?

Just a side note related to the topic, that might already solve your problem...

Version 7 (released just yesterday) has different default strings for the previous and next links. It uses only < and >. While the "Prev" and "Next" are gone, the new chevrons are different glyphs/symbols that look larger than the the ones we used before.

If that is not what you want, then follow one of the methods suggested by @benkoshy.

[MarchandMD]

Thanks; We still need the word + symbol... just a larger symbol.

It's difficult because they're rendered together as the innerHTML.

[ddnexus]

Now that you explained the details of your question... you have another very simple way of doing it without javascript or overriding. Just use span tags in the dictionary entries:

This one is super simple and recommended because it's very robust over updates:

For example:

    prev: '<span class="prev-chevron">&lt;</span>&nbsp;Prev'
    next: 'Next&nbsp;<span class="next-chevron">&gt;</span>'

Then you can target the classes of the chevrons (you may even use a single class for them).

FYI: Nested span are legal HTML.

[MarchandMD]

Nice!

For anyone else who's looking to achieve something similar, here's how I got it working:

1. Pagy::I18n.load({locale: "en", filepath: "config/locales/pagy.en.yml"}) in initializers/pagy.rb
2. create config/initializers/pagy.en.yml
3. add the custom dictionary here

one caveat: In @ddnexus solution above, he has nested double quotations which was causing an error.

# config/locales/pagy.en.yml

en:
  pagy:
    nav:
      gap: "..."
      prev: "<span class='prev-chevron'>&lt;</span>&nbsp;Prev"
      next: "Next&nbsp;<span class='next-chevron'>&gt;</span>"

I'm sure there's probably something superfluous here, but it's what I did.

Thanks for the help!

[ddnexus]

I edited the double quotes in the yaml file: I think it's better to edit the original typos: it will save the reader some fix/time.