[NTG-context] Wiki problem - labels missing from the main diagram on the Page Layout page

[NTG-context] Wiki problem - labels missing from the main diagram on the Page Layout page

[Bruce Horrocks]

When I go to the page layout page on the Contextgarden wiki

  <https://wiki.contextgarden.net/Page_Layout>

the "typesetting areas" diagram is missing its text labels. If I click on the diagram the Wiki takes me to the underlying layout.svg file and then I /do/ see the labels.

This happens in both Safari and Firefox.

Any suggestions as to what needs to be changed to get the diagram to display correctly?

—
Bruce Horrocks
Hampshire, UK

___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________

[NTG-context] Re: Wiki problem - labels missing from the main diagram on the Page Layout page

[Henning Hraban Ramm]

Am 05.11.23 um 19:11 schrieb Bruce Horrocks:
> When I go to the page layout page on the Contextgarden wiki
> 
>    <https://wiki.contextgarden.net/Page_Layout>
> 
> the "typesetting areas" diagram is missing its text labels. If I click on the diagram the Wiki takes me to the underlying layout.svg file and then I /do/ see the labels.
> 
> This happens in both Safari and Firefox.
> 
> Any suggestions as to what needs to be changed to get the diagram to display correctly?

Probably a problem on your side – works for me with Firefox and Chrome 
based browsers. And I’ve no clue which setting would influence that.

Web developer tools as well as Inkscape show that there’s no real text 
in the SVG, just paths.

Hraban

___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________

[NTG-context] Re: Wiki problem - labels missing from the main diagram on the Page Layout page

[peter.hopcroft--- via ntg-context]

I see this problem on my iPad: Safari and Orion browsers. 

I do not see this problem on my mac: Safari and Orion browsers. 

Peter

> On 6/11/2023, at 8:19 AM, Henning Hraban Ramm <texml@fiee.net> wrote:
> 
> Am 05.11.23 um 19:11 schrieb Bruce Horrocks:
>> When I go to the page layout page on the Contextgarden wiki
>>   <https://wiki.contextgarden.net/Page_Layout>
>> the "typesetting areas" diagram is missing its text labels. If I click on the diagram the Wiki takes me to the underlying layout.svg file and then I /do/ see the labels.
>> This happens in both Safari and Firefox.
>> Any suggestions as to what needs to be changed to get the diagram to display correctly?
> 
> Probably a problem on your side – works for me with Firefox and Chrome based browsers. And I’ve no clue which setting would influence that.
> 
> Web developer tools as well as Inkscape show that there’s no real text in the SVG, just paths.
> 
> Hraban
> 
> ___________________________________________________________________________________
> If your question is of interest to others as well, please add an entry to the Wiki!
> 
> maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
> webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
> archive  : https://github.com/contextgarden/context
> wiki     : https://wiki.contextgarden.net
> ___________________________________________________________________________________

___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________

[NTG-context] Re: Wiki problem - labels missing from the main diagram on the Page Layout page

[Bruce Horrocks]

> On 5 Nov 2023, at 20:24, peter.hopcroft--- via ntg-context <ntg-context@ntg.nl> wrote:
> 
> I see this problem on my iPad: Safari and Orion browsers. 
> 
> I do not see this problem on my mac: Safari and Orion browsers. 
> 

Thank-you both for checking.

Looking more closely it seems that the web page is actually showing a PNG preview of the SVG file

https://wiki.contextgarden.net/images/thumb/5/54/layout.svg/525px-layout.svg.png

(NB: there are alternate size variants so the px value may vary for you.[1])

But the issue is still the same - the text labels won't display when the .png is viewed via the main page but do display correctly when opened directly.

I'll keep delving.


[1] Now there's an irony: the Wiki software creates different-sized previews of a vector image so that it can show the image at different sizes on different clients.

—
Bruce Horrocks
Hampshire, UK

___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________

[NTG-context] Re: Wiki problem - labels missing from the main diagram on the Page Layout page

[Taco Hoekwater]

> On 6 Nov 2023, at 00:35, Bruce Horrocks <ntg@scorecrow.com> wrote:
> 
> 
> [1] Now there's an irony: the Wiki software creates different-sized previews of a vector image so that it can show the image at different sizes on different clients.

I bet it started doing this back 'in the day’ to support Internet Explorer 6.



___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________

[NTG-context] Re: Wiki problem - labels missing from the main diagram on the Page Layout page

[Marco Patzer]

On Sun, 5 Nov 2023 18:11:45 +0000
Bruce Horrocks <ntg@scorecrow.com> wrote:

> When I go to the page layout page on the Contextgarden wiki
> 
>   <https://wiki.contextgarden.net/Page_Layout>
> 
> the "typesetting areas" diagram is missing its text labels.

Fixed.

> Any suggestions as to what needs to be changed to get the diagram to
> display correctly?

I saved it again and now it seems to work.

Marco
___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________

[NTG-context] Re: Wiki problem - labels missing from the main diagram on the Page Layout page

[Henning Hraban Ramm]

[-- Attachment #1: Type: text/plain, Size: 605 bytes --]

Am 08.11.23 um 09:53 schrieb Marco Patzer:
> On Sun, 5 Nov 2023 18:11:45 +0000
> Bruce Horrocks <ntg@scorecrow.com> wrote:
> 
>> When I go to the page layout page on the Contextgarden wiki
>>
>>    <https://wiki.contextgarden.net/Page_Layout>
>>
>> the "typesetting areas" diagram is missing its text labels.
> 
> Fixed.
> 
>> Any suggestions as to what needs to be changed to get the diagram to
>> display correctly?
> 
> I saved it again and now it seems to work.

Thank you!
BTW, for my book I made a new one in MetaPost, see attachment.

\startMPpage
input layout.mp;
draw Layout;
\stopMPpage

Hraban

[-- Attachment #2: layout.mp --]
[-- Type: text/plain, Size: 10820 bytes --]

% Diagram of layout areas
% 2023 by Henning Hraban Ramm, hraban@fiee.net
% license: GNU FDL 1.3+ & CC-BY-SA 3.0+

definecolor [name="boxColor", c=.15, k=.1];
definecolor [name="boxTextColor", c=.4, k=.5];
definecolor [name="pageColor", m=.2, y=.5, k=.1];
definecolor [name="pageTextColor", m=.2, y=.5, k=.25];
definecolor [name="arrowColor", k=1];
definecolor [name="arrowTextColor", k=1];
definecolor [name="distanceArrowColor", k=1];
definecolor [name="distanceTextColor", k=1];
defaultfont  := "\truefontname{Mono}*default" ;
pickup pencircle scaled 1;

distance := 15bp;
abit := distance/3;

edgewidth := 40bp;
marginwidth := 60bp;
textwidth := 200bp;

topheight := 40bp;
headerheight := 50bp;
textheight := 300bp;

leftedgestart := 0bp;
leftmarginstart := edgewidth + distance;
textleftstart := leftmarginstart + marginwidth + distance;
rightmarginstart := textleftstart + textwidth + distance;
rightedgestart := rightmarginstart + marginwidth + distance;

arrowleftstart := textleftstart + textwidth/2;

bottomstart := 0bp;
footerstart := topheight + distance;
textfootstart := footerstart + headerheight + distance;
headerstart := textfootstart + textheight + distance;
topstart := headerstart + headerheight + distance;

pageleftstart := edgewidth/2;
pagefootstart := topheight/2;
pagewidth := rightedgestart;
pageheight := topstart;

picture Layout;
Layout := image(
  % bottom
  fill unitsquare xscaled edgewidth   yscaled topheight shifted (leftedgestart,bottomstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled topheight shifted (leftmarginstart,bottomstart) withcolor "boxColor";
  fill unitsquare xscaled textwidth   yscaled topheight shifted (textleftstart,bottomstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled topheight shifted (rightmarginstart,bottomstart) withcolor "boxColor";
  fill unitsquare xscaled edgewidth   yscaled topheight shifted (rightedgestart,bottomstart) withcolor "boxColor";
  label.urt("bottom", (bottomstart,-leftedgestart)) rotated 90 withcolor "boxTextColor";
  % footer
  fill unitsquare xscaled edgewidth   yscaled headerheight shifted (leftedgestart,footerstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled headerheight shifted (leftmarginstart,footerstart) withcolor "boxColor";
  fill unitsquare xscaled textwidth   yscaled headerheight shifted (textleftstart,footerstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled headerheight shifted (rightmarginstart,footerstart) withcolor "boxColor";
  fill unitsquare xscaled edgewidth   yscaled headerheight shifted (rightedgestart,footerstart) withcolor "boxColor";
  label.urt("footer", (footerstart,-leftedgestart)) rotated 90 withcolor "boxTextColor";
  % text
  fill unitsquare xscaled edgewidth   yscaled textheight shifted (leftedgestart,textfootstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled textheight shifted (leftmarginstart,textfootstart) withcolor "boxColor";
  fill unitsquare xscaled textwidth   yscaled textheight shifted (textleftstart,textfootstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled textheight shifted (rightmarginstart,textfootstart) withcolor "boxColor";
  fill unitsquare xscaled edgewidth   yscaled textheight shifted (rightedgestart,textfootstart) withcolor "boxColor";
  label.urt("text", (textfootstart,-leftedgestart)) rotated 90 withcolor "boxTextColor";
  % header
  fill unitsquare xscaled edgewidth   yscaled headerheight shifted (leftedgestart,headerstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled headerheight shifted (leftmarginstart,headerstart) withcolor "boxColor";
  fill unitsquare xscaled textwidth   yscaled headerheight shifted (textleftstart,headerstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled headerheight shifted (rightmarginstart,headerstart) withcolor "boxColor";
  fill unitsquare xscaled edgewidth   yscaled headerheight shifted (rightedgestart,headerstart) withcolor "boxColor";
  label.urt("header", (headerstart,-leftedgestart)) rotated 90 withcolor "boxTextColor";
  % top
  fill unitsquare xscaled edgewidth   yscaled topheight shifted (leftedgestart,topstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled topheight shifted (leftmarginstart,topstart) withcolor "boxColor";
  fill unitsquare xscaled textwidth   yscaled topheight shifted (textleftstart,topstart) withcolor "boxColor";
  fill unitsquare xscaled marginwidth yscaled topheight shifted (rightmarginstart,topstart) withcolor "boxColor";
  fill unitsquare xscaled edgewidth   yscaled topheight shifted (rightedgestart,topstart) withcolor "boxColor";
  label.urt("top", (topstart,-leftedgestart)) rotated 90 withcolor "boxTextColor";

  % vertical areas
  label.urt("leftedge\strut", (leftedgestart,topstart+topheight)) withcolor "boxTextColor";
  label.urt("leftmargin\strut", (leftmarginstart,topstart+topheight)) withcolor "boxTextColor";
  label.urt("text\strut", (textleftstart,topstart+topheight)) withcolor "boxTextColor";
  label.urt("rightmargin\strut", (rightmarginstart,topstart+topheight)) withcolor "boxTextColor";
  label.urt("rightedge\strut", (rightedgestart,topstart+topheight)) withcolor "boxTextColor";

  % vertical distances
  label.lrt("topdistance", (textleftstart+abit,topstart)) withcolor "distanceTextColor";
  drawdblarrow (textleftstart+2,topstart)--(textleftstart+2,topstart-distance) withcolor "distanceArrowColor";
  label.lrt("headerdistance", (textleftstart+abit,headerstart)) withcolor "distanceTextColor";
  drawdblarrow (textleftstart+2,headerstart)--(textleftstart+2,headerstart-distance) withcolor "distanceArrowColor";
  label.lrt("footerdistance", (textleftstart+abit,textfootstart)) withcolor "distanceTextColor";
  drawdblarrow (textleftstart+2,textfootstart)--(textleftstart+2,textfootstart-distance) withcolor "distanceArrowColor";
  label.lrt("bottomdistance", (textleftstart+abit,footerstart)) withcolor "distanceTextColor";
  drawdblarrow (textleftstart+2,footerstart)--(textleftstart+2,footerstart-distance) withcolor "distanceArrowColor";

  % horizontal distances
  label.lrt("margindistance, rightmargindistance", (textfootstart+abit,-textleftstart-textwidth)) rotated 90 withcolor "distanceTextColor";
  drawdblarrow (leftmarginstart,textfootstart)--(leftmarginstart-distance,textfootstart) withcolor "distanceArrowColor";
  label.lrt("edgedistance, rightedgedistance", (textfootstart+abit,-rightmarginstart-marginwidth)) rotated 90 withcolor "distanceTextColor";
  drawdblarrow (textleftstart,textfootstart)--(textleftstart-distance,textfootstart) withcolor "distanceArrowColor";
  label.lrt("margindistance, leftmargindistance", (textfootstart+abit,-leftmarginstart-marginwidth)) rotated 90 withcolor "distanceTextColor";
  drawdblarrow (rightmarginstart,textfootstart)--(rightmarginstart-distance,textfootstart) withcolor "distanceArrowColor";
  label.lrt("edgedistance, leftedgedistance", (textfootstart+abit,-leftedgestart-edgewidth)) rotated 90 withcolor "distanceTextColor";
  drawdblarrow (rightedgestart,textfootstart)--(rightedgestart-distance,textfootstart) withcolor "distanceArrowColor";

  % page
  draw unitsquare xscaled pagewidth yscaled pageheight shifted (pageleftstart,pagefootstart) withcolor "pageColor" dashed evenly withpen pencircle scaled 2;
  label.urt("pagewidth",  (pageleftstart,pagefootstart+pageheight)) withcolor "pageTextColor";
  label.urt("pageheight", (pagefootstart,-pageleftstart)) rotated 90 withcolor "pageTextColor";

  % horizontal measures
  drawdblarrow (pageleftstart,headerstart-2*distance)--(textleftstart,headerstart-2*distance) withcolor "arrowColor";
  label.urt("backspace", (pageleftstart,headerstart-2*distance)) withcolor "arrowTextColor";
  drawdblarrow (textleftstart,headerstart-3.5*distance)--(textleftstart+textwidth,headerstart-3.5*distance) withcolor "arrowColor";
  label.urt("width\strut", (textleftstart,headerstart-3.5*distance)) withcolor "arrowTextColor";

  drawdblarrow (rightmarginstart,headerstart-5*distance)--(rightmarginstart+marginwidth,headerstart-5*distance) withcolor "arrowColor";
  label.urt("margin,", (rightmarginstart,headerstart-5*distance)) withcolor "arrowTextColor";
  label.lrt("rightmargin", (rightmarginstart,headerstart-5*distance)) withcolor "arrowTextColor";

  drawdblarrow (leftmarginstart+marginwidth,headerstart-5*distance)--(leftmarginstart,headerstart-5*distance) withcolor "arrowColor";
  label.urt("margin,", (leftmarginstart,headerstart-5*distance)) withcolor "arrowTextColor";
  label.lrt("leftmargin", (leftmarginstart,headerstart-5*distance)) withcolor "arrowTextColor";

  drawdblarrow (rightedgestart,headerstart-7*distance)--(rightedgestart+edgewidth,headerstart-7*distance) withcolor "arrowColor";
  label.urt("edge,", (rightedgestart,headerstart-7*distance)) withcolor "arrowTextColor";
  label.lrt("rightedge", (rightedgestart,headerstart-7*distance)) withcolor "arrowTextColor";

  drawdblarrow (leftedgestart+edgewidth,headerstart-7*distance)--(leftedgestart,headerstart-7*distance) withcolor "arrowColor";
  label.urt("edge,", (leftedgestart,headerstart-7*distance)) withcolor "arrowTextColor";
  label.lrt("leftedge", (leftedgestart,headerstart-7*distance)) withcolor "arrowTextColor";

  % vertical measures
  drawdblarrow (arrowleftstart,pagefootstart+pageheight)--(arrowleftstart,headerstart+headerheight) withcolor "arrowColor";
  label.ulft("topspace\strut", (pagefootstart+pageheight,-arrowleftstart)) rotated 90 withcolor "arrowTextColor";

  drawdblarrow (arrowleftstart+2*distance,headerstart+headerheight)--(arrowleftstart+2*distance,footerstart) withcolor "arrowColor";
  label.ulft("height\strut", (headerstart+headerheight,-arrowleftstart-2*distance)) rotated 90 withcolor "arrowTextColor";

  drawdblarrow (arrowleftstart+4*distance,headerstart+headerheight)--(arrowleftstart+4*distance,headerstart) withcolor "arrowColor";
  label.ulft("header\strut", (headerstart+headerheight,-arrowleftstart-4*distance)) rotated 90 withcolor "arrowTextColor";

  drawdblarrow (arrowleftstart+4*distance,footerstart+headerheight)--(arrowleftstart+4*distance,footerstart) withcolor "arrowColor";
  label.ulft("footer\strut", (footerstart+headerheight,-arrowleftstart-4*distance)) rotated 90 withcolor "arrowTextColor";

  drawdblarrow (arrowleftstart+5*distance,topstart+topheight)--(arrowleftstart+5*distance,topstart) withcolor "arrowColor";
  label.ulft("top\strut", (topstart+topheight,-arrowleftstart-5*distance)) rotated 90 withcolor "arrowTextColor";

  drawdblarrow (arrowleftstart+5*distance,bottomstart+topheight)--(arrowleftstart+5*distance,bottomstart) withcolor "arrowColor";
  label.ulft("bottom\strut", (bottomstart+topheight,-arrowleftstart-5*distance)) rotated 90 withcolor "arrowTextColor";
);

[-- Attachment #3: Type: text/plain, Size: 511 bytes --]

___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________

[NTG-context] Re: Wiki problem - labels missing from the main diagram on the Page Layout page

[Andres Conrado Montoya]

[-- Attachment #1.1: Type: text/plain, Size: 1319 bytes --]

A possible reason for this is that the use of xlink:href, the attribute
used to render the text glyphs created by symbol elements in
https://wiki.contextgarden.net/images/5/54/layout.svg, has been deprecated
since SVG 2.0, as you can see in
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

Instead, as the article recommends, just href should be used instead, and
the xlink:href attribute can be preserved as a fallback for (very) old
browsers.


-- 
Andrés Conrado Montoya
Andi Kú
andresconrado@gmail.com
http://sesentaycuatro.com
http://messier87.com
http://chiquitico.org
----------------------------------------
Los fines no justifican los medios, porque la medida verdadera de nuestro
carácter está dada por los medios que estamos dispuestos a utilizar, no por
los fines que proclamamos.
----------------------------------------

“You develop an instant global consciousness, a people orientation, an
intense dissatisfaction with the state of the world, and a compulsion to do
something about it. From out there on the moon, international politics look
so petty. You want to grab a politician by the scruff of the neck and drag
him a quarter of a million miles out and say, ‘Look at that, you son of a
bitch.’” — Apollo 14 astronaut Edgar Mitchell

[-- Attachment #1.2: Type: text/html, Size: 2007 bytes --]

[-- Attachment #2: Type: text/plain, Size: 511 bytes --]

___________________________________________________________________________________
If your question is of interest to others as well, please add an entry to the Wiki!

maillist : ntg-context@ntg.nl / https://mailman.ntg.nl/mailman3/lists/ntg-context.ntg.nl
webpage  : https://www.pragma-ade.nl / https://context.aanhet.net (mirror)
archive  : https://github.com/contextgarden/context
wiki     : https://wiki.contextgarden.net
___________________________________________________________________________________