Pikchr

Text overflow in safari when zoomed in
Login
Hierarchical

Text overflow in safari when zoomed in

(1) By briano on 2024-07-24 11:26:54 [source]

left: safari 100% vs ~300%
right: chrome 100% vs ~300%

html generated by: echo box "hello" fit |pikchr -

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>PIKCHR Test</title>
<style>
  .hidden {
     position: absolute !important;
     opacity: 0 !important;
     pointer-events: none !important;
     display: none !important;
  }
</style>
<script>
  function toggleHidden(id){
    for(var c of document.getElementById(id).children){
      c.classList.toggle('hidden');
    }
  }
</script>
<meta charset="utf-8">
</head>
<body>
<h1>File -</h1>
<div id="svg-1" onclick="toggleHidden('svg-1')">
<div style='border:3px solid lightgray;max-width:57px;'>
<svg xmlns='http://www.w3.org/2000/svg' class="pikchr" viewBox="0 0 57.1968 34.56" />
<path d="M2.16,32.4L55.0368,32.4L55.0368,2.16L2.16,2.16Z"  style="fill:none;stroke-width:2.16;stroke:rgb(0,0,0);" />
<text x="28.5984" y="17.28" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">hello</text>
</svg>
</div>
<pre class='hidden'>box "hello" fit
</pre>
</div>
</body></html>

adding style="font-size: 100%" to the svg tag seems to fix the issue

(2) By Michael Thornburgh (zenomt) on 2024-11-26 19:15:12 in reply to 1 [link] [source]

sorry i'm so late to this thread. i haven't synced my project with the main Pikchr source in a while, so i didn't notice this change til today.

in checkins 67d1cab26b5b812f and 1562bd171ab868db DRH added a style='font-size:initial' to the SVG tag, as requested.

however, this makes it harder to add additional styling directly to the outputted SVG tag with simple text manipulation. for example, my command-line tool has a command-line option to add arbitrary attributes to the SVG tag, which i use when generating a standalone SVG to use with <img> elements to, for example, set the font-family to sans-serif, and to set the background color to white so that the SVG will be visible if viewed on GitHub in dark mode.

SVG allows a <style> element within the <svg> element. if the font-size:initial were to be moved to an internal <style> element, that would free up the style attribute on the main <svg> so pikchr() users like me can once again add additional styling with only trivial text manipulation.

(3) By Stephan Beal (stephan) on 2024-11-27 01:27:37 in reply to 2 [link] [source]

SVG allows a <style> element within the <svg> element. if the font-size:initial were to be moved to an internal <style> element,

While looking into making that change, the following question quickly arose: since that STYLE tag would require a CSS selector, and any number of SVGs can be contained in a given page, what do you propose the content of that tag should look like?

The scope of a style tag in an SVG is not limited to just that SVG: it's applied to all elements in the page, exactly as if the style tag had been included elsewhere in the page.

That can be seen by...

  • Start at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style
  • Click the "play" button next to their example to start up an editor.
  • In the CSS section set the height of SVG elements to 50%.
  • In the code section, copy and duplicate the SVG element.
  • Edit the style tag of the second SVG element, e.g. change the fill to blue.
  • Tap the Run button
  • Note that the first SVG is also affected by that, despite having its own style tag.

(4) By anonymous on 2024-11-27 01:56:48 in reply to 3 [link] [source]

I'm not the OP, and I could be speaking nonsense.

Would svg {font-size: initial;} be the right style?

This uses a tag with minimal specificity to set the default which is the same for all SVG's. Then svg:nth-of-type(x) or something similar could be used to override the css for a specific SVG on the page.

Also would adding the ability to define an id in pikchr for the SVG make addressing css to a specific SVG easier?

(5) By Stephan Beal (stephan) on 2024-11-27 02:01:52 in reply to 4 [link] [source]

Would svg {font-size: initial;} be the right style?

In specific cases, perhaps, but not in the general case. pikchr has no control over how many pikchrs are in a page nor how they are arranged in relation to other, user-defined STYLE and SVG tags. For example, if we have a page with:

  • pikchr#1
  • STYLE tag
  • pikchr#2

and the client sets svg{font-size:...} in that STYLE tag, then we'll overwrite it in pikchr#2. The same applies if that STYLE tag is instead an SVG of the user's own design.

By adding STYLE tags to pikchr, and setting selectors which apply outside of that pikchr, we risk polluting client-level pages/docs with unintended style changes.

(6) By Michael Thornburgh (zenomt) on 2024-11-27 02:04:45 in reply to 3 [link] [source]

The scope of a style tag in an SVG is not limited to just that SVG: it's applied to all elements in the page, exactly as if the style tag had been included elsewhere in the page.

thanks Stephan. i didn't expect that behavior (clearly), but in retrospect it makes (gross) sense.

being able to inject extra style declarations to pikchr() would require an API change, which is probably not warranted. i'll explore either wrapping the generated <svg> in another <svg> to which i can apply arbitrary attributes, or do a less trivial munging to the <svg> to allow for appending more stuff to an existing attribute. or (most gross) simply include font-size:initial in any style attribute i manually add via command-line option (assuming a later instances of the same attribute would override earlier ones).