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:
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:
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 "→". The problem we could have is the user use fonts which does not contain this character.
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 ⬌ Left Right Black Arrow<br />↔ - Left-right arrow ↕ - Up-down arrow ⇔ - left right double arrow<br />⇐ - Left double arrow ⇑ - Up double arrow ⇒ - Right double arrow ⇓ - Down double arrow<br />➡ - 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:
⬌ Left Right Black Arrow<br />↔ - Left-right arrow ↕ - Up-down arrow ⇔ - left right double arrow<br />⇐ - Left double arrow ⇑ - Up double arrow ⇒ - Right double arrow ⇓ - Down double arrow<br />➡ - 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>
unicode character (\u027a1).