search

thegetty / quire

A multi-package repository for the Quire multiformat publishing framework
https://quire.getty.edu/
BSD 3-Clause "New" or "Revised" License
89 stars 10 forks source link

Asterisks appearing instead of italics in browser page title #929

Open zsofiaj opened 2 months ago

zsofiaj commented 2 months ago

Before proceeding, make sure there isn’t an existing issue for this bug.

Expected Behavior

In the browser page title, I expect italicized text, such as titles of works, to appear in italics.

Actual Behavior

Text that should be italicized, such as titles of works, appears with asterisks in the page title at the top of the browser, above the url.

Screenshot 2024-04-25 at 1 54 32 PM

Steps to Reproduce

Step 1: Go to any catalogue entry in our project, for example: https://italian-paintings-live.netlify.app/catalogue/volume-1/other-tuscan-schools/71/

Step 2: At the top of the browser window, above the url, the page title should show the title of the object in italics, but it shows up with asterisks. This might only be visible if you open a fresh window, with only a single tab.

Version Numbers

Project: quire-cli 1.0.0-rc.11 quire-11ty 1.0.0-rc.16 starter https://github.com/thegetty/quire-starter-default@2.9.0 System: quire-cli 1.0.0-rc.11 node v20.4.0 npm 9.7.2 os Darwin 23.3.0

Web Browser

Safari 17.3 Chrome 124.0.6367.62

Relevant Terminal/Shell Output

No response

Supporting Information

No response

its-leofisher commented 3 weeks ago

@zsofiaj It's not possible to modify the text in the title bar of a browser. The browser tab title is controlled by the browser itself, and there is no standard HTML or CSS way to alter the font style (e.g., making it italic) of the tab title directly from a webpage. This is a security and consistency feature to ensure that browser interfaces remain uniform and predictable for users.

What I do suggest is to detect asteriks in the context of trying to italicize the text in between and remove it.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zsofiaj"><img src="https://avatars.githubusercontent.com/u/68071544?v=4" />zsofiaj</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <p>Thanks so much, @its-leofisher . I don't fully understand the suggestion in the last sentence of your post above. Are you saying I should remove the asterisks from the "title" field at the top of the md file for each object entry? I suppose the problem is that the original template was designed to display just a title as the page title for each entry, but we need it to display the artist and title, so we've formatted the title in italics. If I remove the asterisks, then the title will not appear italicized at the top of the entry, and we want it to be italicized there (where I've circled in the screenshot below). I hope that makes sense.</p> <img width="1416" alt="Screenshot 2024-07-16 at 2 47 26 PM" src="https://github.com/user-attachments/assets/fb2945e1-9cd6-4319-a31d-c553cb96da51"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/its-leofisher"><img src="https://avatars.githubusercontent.com/u/40841827?v=4" />its-leofisher</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Thanks so much, @its-leofisher . I don't fully understand the suggestion in the last sentence of your post above. Are you saying I should remove the asterisks from the "title" field at the top of the md file for each object entry? I suppose the problem is that the original template was designed to display just a title as the page title for each entry, but we need it to display the artist and title, so we've formatted the title in italics. If I remove the asterisks, then the title will not appear italicized at the top of the entry, and we want it to be italicized there (where I've circled in the screenshot below). I hope that makes sense.</p> <img alt="Screenshot 2024-07-16 at 2 47 26 PM" width="1416" src="https://private-user-images.githubusercontent.com/68071544/349219555-fb2945e1-9cd6-4319-a31d-c553cb96da51.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExNTM5NjcsIm5iZiI6MTcyMTE1MzY2NywicGF0aCI6Ii82ODA3MTU0NC8zNDkyMTk1NTUtZmIyOTQ1ZTEtOWNkNi00MzE5LWEzMWQtYzU1M2NiOTZkYTUxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDE4MTQyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc4ZmI0NzEzZmYwYTU5NzBhNDI4NDJlODY2ZmRjZjNhMGY0ZGRhMTY5YmM2ZWRhNzkyMjBhYzU0YTNmMDljMTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.b2Rdx-aEJX2GjS4R9k3EoIS_ETnluFnqSH0hAa4iPok"> </blockquote> <p>I see, that makes sense. My suggestion to remove asteriks from the browser title bar is because they are unnecessary in context of SEO especially if the title can be long.</p> <img width="238" alt="image" src="https://github.com/user-attachments/assets/e3a1b9b1-9dd1-49fd-977e-80f2ac98fdbf"> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>