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

RIDE 3500⌶ doesn't support SVG with height="100%" #553

Closed
dyavc opened this issue Sep 5, 2019 · 7 comments
Closed

RIDE 3500⌶ doesn't support SVG with height="100%" #553

dyavc opened this issue Sep 5, 2019 · 7 comments
Labels
1h Small issue est. to take less than 1 hour
Milestone

Comments

@dyavc
Copy link

dyavc commented Sep 5, 2019

Describe the issue you are having

RIDE 3500⌶ doesn't support SVG with height="100%"
This prevents the SVG from fitting the height of the display window.
it does support width="100%

Did you connect to an already running interpreter or start the interpreter from RIDE?

Start an interpreter

How do you reproduce the issue?

repro553.dws is a 17.1 workspace which shows the issue. It is attached in a comment below.

3500⌶ fh ⍝ fit height 100 % only. does not work
3500 ⌶ fwh ⍝ fit width and height 100 %. does not work.
3500 ⌶ fw ⍝ fit width 100 % . This works.

⍝ resize the 3500⌶ window : when it has a narrow height, the bottom of the box is not visible, whereas it should be (save SVG to file.svg and open with browser to compare

Paste the contents of Help → About (Shift+F1)

IDE:
  Version: 4.2.3437
  Platform: Win32
  Date: 2019-08-13 14:55:17 +0200
  Git commit: 691f47856e05a36f70847313b23e061a0cf95392
  Preferences:{
    "connectFav":"3",
    "floatOnTop":"1",
    "floating":"1",
    "indent":"2",
    "indentComments":"1",
    "indentMethods":"2",
    "kbdLocale":"en_GB",
    "keys":"{\"MA\":[\"Ctrl-Alt-R\"]}",
    "matchBrackets":"0",
    "pfkeys":"[\"\",\"\",\"\",\":access Public <ER>\",\":access Public <ER>\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"]",
    "prefixMaps":"{\"en_GB\":\"S[D]\"}",
    "selectedExe":"C:\\Program Files\\Dyalog\\Dyalog APL-64 17.1 Unicode\\dyalog.exe",
    "title":"{WSID}  {VER} PID: {PID} under RIDE {RIDE_VER}",
    "wse":"1"
  }

Interpreter:
  Version: 17.1.36847
  Platform: Windows-64
  Edition: Unicode/64
  Date: Aug 15 2019 at 09:04:32

@dyavc
Copy link
Author

dyavc commented Sep 5, 2019

repro553.zip
repro553.zip has 3 svg files to try in a browser

repro553.dws is a 17.1 workspace which shows the issue
3500⌶ fh ⍝ fit height 100 % only. does not work
3500 ⌶ fwh ⍝ fit width and height 100 %. does not work.
3500 ⌶ fw ⍝ fit width 100 % . This works.

@dyavc
Copy link
Author

dyavc commented Sep 5, 2019

Nicolas says that this is important as it is the default way to view SVG's from SharpPlot, and by default we want them to scale to the window size

@dyavc
Copy link
Author

dyavc commented Sep 5, 2019

For a different real-world example:
)load sharpplot.dws
#.View #.Samples.Sample

@e9gille
Copy link
Contributor

e9gille commented Sep 5, 2019

The reason it behave different to opening it in a browser is that RIDE injects the content into the body element of an empty HTML page. The assumption is that the argument to the I beam is going to be some valid HTML markup, but not a complete page.

I'm not sure what to do here. You can get the SVG to fill the page if you add the style attribute:
style="height: -webkit-fill-available; width: -webkit-fill-available;"

Alternatively RIDE doesn't try to wrap the content at all and it is left to the user to provide all the markup. I'm not sure why this approach wasn't used. Is there a drawback I'm missing?

@abrudz
Copy link
Member

abrudz commented Jul 19, 2023

Alternatively RIDE doesn't try to wrap the content at all and it is left to the user to provide all the markup. I'm not sure why this approach wasn't used. Is there a drawback I'm missing?

Let's just do that!

@abrudz abrudz added this to the RIDE 4.5 milestone Aug 8, 2023
@abrudz abrudz added the 1h Small issue est. to take less than 1 hour label Aug 8, 2023
@e9gille
Copy link
Contributor

e9gille commented Aug 31, 2023

Having looked into the issue and tried various things I noted that:

  1. Chrome browser behaves the same in all 3 attached examples, limiting height width to 100% preserving aspect ratio (due to browser css default setting svg width and height to 100%).
  2. In electron version of RIDE I tried writing the content to a temp file, using the provided title as file name, and open it in a new BrowserWindow. This shows that the browser infers content type from the file extension.
  • It behaves the same as Chrome when the file name has an .svg extension.
  • If the file has a html extension and the content doesn't include the DOCTYPE tag, it goes into BackCompat mode and I observe that fh fills the height, fw fills the width, fwh limits on both ends. In all cases aspect ratio is preserved.

I can do point 2 above which would as a bonus allow you to send xml content, give it a *.xml title and get a browserwindow that renders it as xml.

For svg with the intention to fill the width and height the svg element should have the attribute preserveAspectRatio="none" and if given an *.svg title, the svg element needs a style attribute to unset the width and height settings of the browser.

To summarise, it's not clear to me that it is RIDE that is at fault here and I don't think the proposed change on its own resolves the issue reported.

@e9gille
Copy link
Contributor

e9gille commented Sep 6, 2023

Fixed for electron version in #1128 , can't fix for ZF version

@e9gille e9gille closed this as completed Sep 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1h Small issue est. to take less than 1 hour
Projects
None yet
Development

No branches or pull requests

3 participants