GithubHelp home page GithubHelp logo

Comments (7)

somiaj avatar somiaj commented on July 20, 2024

Testing the problem here, it appears the height/width settings in the image function aren't the right aspect ratio for the image. So the image is shrunk and centered inside of the image element which has a fixed height/width. This causes the image to move to the right and look tiny as a result. In this case just adjusting the height/width to fit the aspect ratio of the image better would help. Changing the height/width to the following fixed the issue for me:

image($path, width => 114, height => 136, tex_size => 400)

I'm unsure if the texlive version would affect the size/aspect ratio of the resulting image or not. I'm using Debian Bullseye (11) with TeXLive 2020.20210202 and dvisvgm 2.11.1.

from pg.

somiaj avatar somiaj commented on July 20, 2024

Tested this using $drawing->ext('png');, and the image is stretched to fit the image size, so might just be a difference between .svg images keep the aspect ratio while .png images are stretched to fit the size given in the image function.

from pg.

Alex-Jordan avatar Alex-Jordan commented on July 20, 2024

Ah, so simply removing the height declaration could work. That should preserve aspect ratio. Is that what you find?

from pg.

drgrice1 avatar drgrice1 commented on July 20, 2024

In general the img tag in html should never be used with both a width and height attribute. (So for the pg image method this means you should not give the optional height parameter.) If you give both the width and height, then for png images the image will be stretched to fit those dimensions. This can skew things in the image if those dimensions don't match the aspect ratio of the image. If there is typography in the image that can make that hard to read. Of course svg images take more effort to make the scaling occur as you have observed.

If you look at the files t/tikz_tests/tikz_test2.pg and t/tikz_tests/tikz_test3.pg which I wrote you will see that this is the way I did it there. Although git blame attributes tikz_test1.pg to me as well, that file was copied from a previous pull request, and I didn't remove the height attribute (and should have).

On a side note, we shouldn't have separate tikz_tests and latex_image_test directories. Those are too closely related and should be put together into the latex_image_test directory.

from pg.

drgrice1 avatar drgrice1 commented on July 20, 2024

There seems to be another problem with the latex_image_test2.pg problem even if the height attribute is removed. In Firefox on Ubuntu 22.04 I don't see any images at all. It is there, but it is so wide that the image doesn't fit and the actual visible part of the image is to the right of the screen. If I make the browser stretch across both of my dual monitors, the image shows up to the far right. I can also click on the image, and the image is scaled to fit into the dialog and you see the image to the far right.

The problem is that the circuitikz drawing is started at the coordinates (60,1). It should start at (0,0) since everything in the image is relative to that starting point.

from pg.

somiaj avatar somiaj commented on July 20, 2024

Should the img elements from the image function have the img-fluid class added to them so they automatically shrunk to the size of the screen viewing them to be more responsive? Though this is a separate issue than this test.

from pg.

drgrice1 avatar drgrice1 commented on July 20, 2024

I don't think that adding the bootstrap img-fluid class is a good idea. Ideally all styling in PG should be in the problem.scss file, and not bootstrap. Of course there are lots of other places that bootstrap is used in PG.

from pg.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.