Narrative website and next Gramps release

Indexes with big databases

I would like to improve the indexes pages for big databases.
I think indexes with several megabytes should be avoided.
splitting indexes in multiple parts depending on alphabet navigation.

It should be multi language.
In that case, the problem will be the events which have different names depending on the language.

I already done that for individuals, families, events and places index.

Do you think we should do the same for sources, surnames ?
What do you think of that ?

If you want to have a look at the development, you can go here.

For this example, I set the number of lines in a page to 100. This value can be changed in the HTML options tab.

For the individuals page, if you click on the index “B”, you will have the first page for the index “B” which display 3 possible subpages. By clicking on “Black, jane” you will see the snapshot below:

This will be available for individuals, families, places and events index.

Any comments ?

3 Likes

3 posts were split to a new topic: Onscreen Paged Scrolling accelerators

The “=>” separators have a somewhat primitive appearance.

Maybe use a black arrow HTML character entity instead?

Using the Surname, Initials Suffix display name format would probably be safer for screen space use. and use an mdash in the tooltips … so they will not include any words needing language translations.
Maybe something like:

Baker, M. ⬌ Black, J. ⬌ Boucher, T. W ⬌ Buttons, F.

<abbr title="Baker, Margaret — Black, Arthur" ><a href="B_Page1.htm">Baker, M.</a></abbr> &#x2B0C; <abbr title="Black, Jane — Boucher, Mark" ><a href="B_Page2.htm">Black, J.</a></abbr> &#x2B0C; <abbr title="Black, Thomas W. — Buttons, Franklin" ><a href="B_Page3.htm">Boucher, T. W</a></abbr> &#x2B0C; <abbr title="— Buttons, Franklin" ><a href="B_Page3#end.htm">Buttons, F.</a></abbr>

I already used the :arrow_right: unicode character (\u027a1).

1 Like

Sorry. I suggested an ⬌ arrow that was not “web-safe”. When checking :arrow_right:, it was pointed out that character was (similarly) not “web-safe”.

Apparently only the following 4 arrows are “safe”:

&larr; - Left arrow
&uarr; - Up arrow
&rarr; - Right arrow
&darr; - Down arrow

The following have HTML entity names but are not web-safe either

&harr; - Left-right arrow
&varr; - Up-down arrow
&lArr; - Left double arrow
&uArr; - Up double arrow
&rArr; - Right double arrow
&dArr; - Down double arrow
&hArr; - Left-right double arrow

What do you mean by web-safe ?
For me web-safe characters are only included in URL and must be percent encoded (RFC3986).
This character in contained into a page and not in a URL.
We can use either “\u027a1” or "&rarr;". The problem we could have is the user use fonts which does not contain this character.

1 Like

I have more than 4500 sources in my database. I modified the sources module to have the same index management.

My last problem is: do we do the same for “surnames” ?

I suspect that the “web-safe” may be becoming an obsolete concern.
appended is HTML/CSS/Javascript for a standalone “Web-Safe Font Validator” page like:

Save the following as Web-safe.html and load into your browser. (I used &#x2B0C; Left Right Black Arrow<br />&harr; - Left-right arrow &varr; - Up-down arrow &hArr; - left right double arrow<br />&lArr; - Left double arrow &uArr; - Up double arrow &rArr; - Right double arrow &dArr; - Down double arrow<br />&#x27A1; - Black Rightwards Arrow as the initial test string.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web-Safe Font Validator</title>
    <meta name="description" content="Web-Safe Font Validator: Test and display text in various web-safe fonts">
    <meta name="keywords" content="web-safe fonts, font validator, typography">
    <meta name="generator" content="Perplexity AI">
    <meta name="date" content="2025-01-22">
    <meta name="referrer" content="https://gramps.discourse.group/t/narrative-website-and-next-gramps-release/6825/8">
<!--  Perplexity prompt (Jan 2025)
"Create a compact and efficient standalone HTML page for a 'Web-Safe Font Validator'. The page should:
    Have a form to input text
    Display the input text in various web-safe fonts
      (Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, and Brush Script MT)
    Include JavaScript to detect if fallback fonts are being used
    Use semantic HTML and include necessary meta tags
Please provide the complete HTML, CSS, and JavaScript code for this page." 

sample test data to paste into the form:
&#x2B0C; Left Right Black Arrow<br />&harr; - Left-right arrow &varr; - Up-down arrow &hArr; - left right double arrow<br />&lArr; - Left double arrow &uArr; - Up double arrow &rArr; - Right double arrow &dArr; - Down double arrow<br />&#x27A1; - Black Rightwards Arrow 
-->
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 10px;
            max-width: 800px;
            margin: 0 auto;
        }
        h3 {
            margin: 1px 0;
            font-size: 1.25em;
        } 
        #fontForm {
            margin: 10px 0;
        }
        #inputText {
            padding: 5px;
            width: 300px;
        }
        .fontDisplay {
            margin: 10px 0;
            padding: 5px;
            border: 1px solid #ddd;
        }
        .fallback-indicator {
            color: red;
            font-size: 0.8em;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <h1>Web-Safe Font Validator</h1>
    
    <form id="fontForm">
        <input type="text" id="inputText" placeholder="Enter text to display" required>
        <button type="submit">Display Fonts</button>
    </form>

    <div id="fontOutput"></div>

    <script>
        function checkFontLoaded() {
            const testElements = document.querySelectorAll('.font-test');
            testElements.forEach(el => {
                const fontFamily = el.style.fontFamily.split(',')[0].replace(/['"]+/g, '');
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                context.font = '12px ' + fontFamily + ', monospace';
                const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
                const primaryWidth = context.measureText(text).width;
                context.font = '12px monospace';
                const fallbackWidth = context.measureText(text).width;
                
                if (Math.abs(primaryWidth - fallbackWidth) < 1) {
                    el.insertAdjacentHTML('afterend', '<span class="fallback-indicator">(font family unavailable,  Fallback used)</span>');
                }
            });
        }

        document.getElementById('fontForm').addEventListener('submit', function(e) {
            e.preventDefault();
            var inputText = document.getElementById('inputText').value;
            var fontOutput = document.getElementById('fontOutput');
            
            var webSafeFonts = [
                {name: "Arial", family: "Arial, sans-serif"},
                {name: "Verdana", family: "Verdana, sans-serif"},
                {name: "Tahoma", family: "Tahoma, sans-serif"},
                {name: "Trebuchet MS", family: "'Trebuchet MS', sans-serif"},
                {name: "Times New Roman", family: "'Times New Roman', serif"},
                {name: "Georgia", family: "Georgia, serif"},
                {name: "Garamond", family: "Garamond, serif"},
                {name: "Courier New", family: "'Courier New', monospace"},
                {name: "Brush Script MT", family: "'Brush Script MT', cursive"}
            ];
            
            fontOutput.innerHTML = '';
            webSafeFonts.forEach(function(font) {
                var fontDiv = document.createElement('div');
                fontDiv.className = 'fontDisplay';
                fontDiv.innerHTML = '<h3>' + font.name + '</h3>' +
                                    '<div class="font-test" style="font-family: ' + font.family + ';">' + inputText + '</div>';
                fontOutput.appendChild(fontDiv);
            });

            // Call the function after a short delay to allow fonts to load
            setTimeout(checkFontLoaded, 100);
        });
    </script>
</body>
</html>

With your program, No font is available, but it works.

I have improved the visual:

  • Now the current indexes are hightlighted.
  • I sorted the events for the person event list (#13588).
  • I verified the from … to is working.

You can see: The gramps database example - Garner von Zieliński, Lewis Anderson Sr and change the language (i.e swedish)

2 Likes

This is now PR: Split the indexes of people, families, events, places and sources in the narrative web. by SNoiraud · Pull Request #1896 · gramps-project/gramps · GitHub

3 Likes

Nice!

Created a Feature Request to link to the PR so it will be included in the Roadmap.
https://gramps-project.org/bugs/view.php?id=13597

Marvellous addition to Narrative Web Report and highlights the benefits of the A-Z selection system.
I have one minor quibble/suggestion when you select an individual the page starts by displaying a long list of the individual events for that person, which is OK but would be even better if it were collapsible to save scrolling down to get to all the data below.
phil

You already have this possibility if you select the “Toggle sections” in the report HTML options tab. In this case, all sections will be collapsed.
It has been implemented in 5.2 Toggle option

1 Like

Hi Serge I understand that but it does not collapse the section I am interested in which is the bit between right facing arrow Events and
Relation to the centre person well at least on my system.
Please this is in no way a big thing Selecting the Arrow before Events opens and collapses all sections bar the first.
As I said before I am very happy with this improved version.
phil

I don’t understand. Can you explain that specifically?
If you have a snapshop explaining what you want would be very helpful.

1 Like

Please bear in mind that I normally work in 1920 x 1080 Landscape mode to show this I have put into 1920 x 1080 Portrait mode.
Again I repeat my minor issue is the section with the list of Events will not collapse. Look at Top Arrow positions.
NarWeb1 first
phil


Can you send me this html page and the css/narrative-screen.css file ?

- Heap, Mark.html (91.6 KB)
Serge Had to cheat slightly narrative-screen just needs renaming to .css
phil

narrative-screen.html (28.1 KB)