Is it possible to create a hyperlink to (not from) part of an SVG file? Specifically, I'd like to either zoom to or highlight a specific text element within an SVG file, but doing so from a separate HTML file.
I will have pre-knowledge of the SVG text element's id and position.
I've tried URLs like below without success, referencing either/both the text elements Id as well as text fragments:
../example.svg#obj-text-4005
../example.svg#:~:text=abc
(update, sorry if I've omitted important details)
The SVGs are part of a collection I have generated myself, and I was hoping (maybe naively) that I could create an unrelated HTML page that would act as an "index" of keywords. This "unrelated HTML page" could simply be a list of URLs, each to a different text element within a given SVG.
Whether the SVG can be referenced/opened directly, or if/how it needs to be part of its own HTML page, is an open and unknown question to me. It's a matter of whatever works and is most practical.
Related
I'd like to provide a link to an external page (not under my control) that has a specific part where I want it to point to (it's a license page with an appendix, and I want the link to go directly to the appendix).
I would normally do this with a # in the URL, like this:
https://en.wikipedia.org/wiki/Fragment_identifier#Examples
This makes the page scroll to already start on the HTML element with id="Examples".
The problem is when the HTML page doesn't put an id on the elements.
Is there any other way to make the URL point to the relevant section? Do URL fragments accept only ids or can I use other CSS selectors somehow?
I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();
I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
My application lets users edit documents. The editor widget, unsurprisingly, represents user documents as HTML.
I need to redisplay the documents outside the editor, but inside my site's layout. Documents need to appear in the exact same style they are presented in the editor, unaffected by my site's stylesheet. I could use the editor in read only mode, with all its buttons hidden, but I still will have scrollbar and border style issues to resolve.
I have identified the CSS file that the editor uses. How can I effectively configure a div element (the one that will contain the document) to (1) disregard all current styling, and (2) load a css file to apply to its content?
You have two options:
1.) Reset all styles on the div containing your document, and make sure your document's styles are prioritized over the reset. This could get messy.
2.) Use an iframe and load the document and styles inside the iframe.
<iframe src=".../documents/myDocument.html"></iframe>
Where "myDocument.html" is an html document containing the document and styles (treat the document html page as any other html page, and make sure it has proper head and body tags, etc.
Other options:
1.) Open the document html page inside another window.
<a href=".../document/myDocument.html" target="_blank" >Open Document</a>
2.) Render the document as a pdf, and load it into the page using a pdf viewer. (you would want to keep a backup of the original document, as the conversion back would be terrible, I presume).
Yes and no. If you want to use a div, you will want to use a stylesheet with styles defined to "reset" the css for that div. That would basically undo your site's styles, and then any new style selectors should be limited to within that div itself.
Otherwise, I would suggest using something like an iframe where you can render a truly independent document.
i need add an image to HTML page then I need to send this page via fax.
i can not use the attribute "src" Any ideas how can I do it? Maybe convert the image to byte array and then insert it to the html page?
You can try to use a "data URI".
[EDIT] If you can't use the src attribute, then you're doomed. There are other ways to add an image to a HTML page like using a div with background-image but that image won't make it to the printer (and hence not onto a fax).
Why can you not use the src attribute? Does the fax software somehow internally render the HTML without images and thus ignore it? If that or something similar is the case then you're better off trying to work around it than to try to trick it with some strange byte manipulation.
Can the fax software accept the entire page as one big image? You can add the image to the HTML as you would any other image in a web page, then use something like FireShot for Firefox to capture the entire rendered page into a single image (or split up by pages, etc.) and fax that.