Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support middle function of dominant-baseline for <text> #158

Merged
merged 2 commits into from
Dec 16, 2023

Conversation

henry-hsieh
Copy link
Contributor

This PR adds supports "middle" value of dominant-baseline.

Following is the example SVG:

<?xml version='1.0' encoding='UTF-8'?>
<svg height='82' preserveAspectRatio='xMidYMid meet' xmlns:svg='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 841 82' width='841' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'>

  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='start' x='44' y='22'>31</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='end' x='196' y='22'>24</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='start' x='204' y='22'>23</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='end' x='356' y='22'>16</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='start' x='364' y='22'>15</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='end' x='516' y='22'>8</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='start' x='524' y='22'>7</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='end' x='676' y='22'>0</text>

  <line stroke='#000000' stroke-width='1' x1='40' x2='200' y1='41' y2='41'/>
  <line stroke='#000000' stroke-width='1' x1='40' x2='200' y1='81' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='200' x2='200' y1='41' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='40' x2='40' y1='41' y2='81'/>

  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='middle' x='120' y='62'>field3</text>

  <line stroke='#000000' stroke-width='1' x1='200' x2='360' y1='41' y2='41'/>
  <line stroke='#000000' stroke-width='1' x1='200' x2='360' y1='81' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='360' x2='360' y1='41' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='200' x2='200' y1='41' y2='81'/>

  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='middle' x='280' y='62'>field2</text>

  <line stroke='#000000' stroke-width='1' x1='360' x2='520' y1='41' y2='41'/>
  <line stroke='#000000' stroke-width='1' x1='360' x2='520' y1='81' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='520' x2='520' y1='41' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='360' x2='360' y1='41' y2='81'/>

  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='middle' x='440' y='62'>field1</text>

  <line stroke='#000000' stroke-width='1' x1='520' x2='680' y1='41' y2='41'/>
  <line stroke='#000000' stroke-width='1' x1='520' x2='680' y1='81' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='680' x2='680' y1='41' y2='81'/>
  <line stroke='#000000' stroke-width='1' x1='520' x2='520' y1='41' y2='81'/>

  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='middle' x='600' y='62'>field0</text>
  <text dominant-baseline='middle' font-family='M+ 1p Fallback' font-size='20' text-anchor='middle' x='760' y='62'>register0</text>

</svg>

This is the render figure before the change (texts are not in the middle of the box):
before

This is the render figure after the change (texts are in the middle of the box):
after

@mogest
Copy link
Owner

mogest commented Dec 11, 2023

Hi @henry-hsieh, thanks so much for the PR! The tests are failing due to the addition of the new property.

You might consider only adding dominant_baseline into opts if it's a non-auto value?

@henry-hsieh
Copy link
Contributor Author

Hi @mogest, I updated the code as your request.

BTW, is there any chance for updating the version of prawn-svg after this PR merged into the master branch?

I'm using a package called bytefield-svg which is heavily using the dominant-baseline to generate svg images (just like the images I put in the PR). This package is an add-on of the Asciidoctor PDF which is using prawn-svg to render svg. I hope this update could help somebody using the same package. Thank you!

@mogest mogest merged commit 9ced7dc into mogest:main Dec 16, 2023
5 of 6 checks passed
@mogest
Copy link
Owner

mogest commented Dec 16, 2023

Thanks @henry-hsieh! I'll do a new release today.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants