Styles for reading on Safari using an iPhone's reader mode

Currently in the process of optimizing my website for iPhones and exploring the Safari reader function.

I believe it's a useful feature for websites with lengthy text, similar to mine, but I want to customize it slightly.

Is there a way to adjust the appearance of the text in the reader? My goal is to insert a divider line to separate different sections of text. I've attempted adding

tags to the HTML and applying border-bottom styles to the div, but neither approach has been successful.

Snippet of my HTML

<div class="storyReader">
  <div class="headerBlock">
     <p>Title</p>
     <p>Author</p>
     <p>Description</p>
  </div>

  <div class="contentBlock">
    <p>This is the really long content. This is the really long content. This is the really long content.</p>
    <p>This is the really long content. This is the really long content. This is the really long content.</p>
    <p>This is the really long content. This is the really long content. This is the really long content.</p>
  </div>
</div>
htmlcssmobile-safari

Answer №1

One possible solution is to insert <hr> tags at specific points in your content and then use CSS to hide them, making them visible only in Reader mode while keeping your site looking clean and organized.

For more information, you can refer to this informative document.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cover any HTML element with a translucent overlay box

I have a unique problem with an HTML file that is out of my control when it comes to its content. My only option is to inject a CSS file and/or JavaScript (potentially using libraries like jQuery) into the mix. Within this HTML, there are elements that re ...

javascriptjqueryhtmlcss

Jquery plugin experiencing a malfunction

I am encountering an issue with my custom plugin as I am relatively new to this. My goal is to modify the properties of div elements on a webpage. Here is the JavaScript code I am using: (function($) { $.fn.changeDiv = function( options ) { var sett ...

javascriptjqueryhtmlcss

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

htmlcss

How can I adjust the font size in a TextField when it is in focus?

As a novice in ReactJS, I am currently utilizing materia-ui to design a page. I am looking to make a custom change on a TextField where the font size adjusts when text is entered. However, adjusting the font size creates too much space between the label a ...

javascriptcssreactjsmaterial-ui

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

What could be causing the width of a table row (tr) in a table element to not function properly, while the height is functioning as expected?

My code is as follows: .table1 { background-color: gray; display: flex; justify-content: ; align-items: ; height: 400px; margin-left: 40px; padding-left: ; } .table1 tr { background-color: blue; height: 50px; width: 50px; } <tabl ...

htmlcss

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

javascriptphpjquerycssajax

Guide on accessing the text content within a div element in HTML by triggering a button click

To extract specific text from multiple div tags, I need to trigger an event when clicking a button. <div class="col-lg-3 col-md-6 mb-4"> <div class="pricing-table pricing-secondary"> <div class="price-hea ...

javascripthtmljquery

Having trouble with Simplemodal showing link content in the modal window

Having trouble getting the modal window to display content from another link? I'm pretty sure I've connected them correctly using the right classes. This is the basic JavaScript provided by . jQuery(function ($) { // Load dialog on page load //$ ...

javascriptjqueryhtmlcsssimplemodal

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

I'm having trouble phrasing this question differently, but I am seeking assistance in comprehending how to address this issue. The error message I am encountering is as follows: TypeError: _co.create is not a function TypeError: Cannot read property ...

htmlangulartypescript

Mastering Excel Automation

Hello, I am looking to download an Excel sheet that contains a macro. However, I am using a PHP script to handle the download process. Is it feasible to download an Excel sheet with a macro in PHP? ...

phphtml

Set the input's type attribute to 'checkbox' to address an issue with Internet Explorer

This issue is specific to Internet Explorer, as other browsers like Firefox, Chrome, Safari, and Opera are functioning correctly. Instead of displaying checkboxes, it shows a value box... Here is the code snippet: <html> <head> <title> ...

javascripthtmlinputcheckbox

The Angular Material error message is indicating that the function registerInput is not defined for this._chipList, causing

Issue Description Currently, I am encountering an error when attempting to retrieve input from an <input> tag and showcase it as chips in the graphical user interface (GUI). The console displays the following error message: "TypeError: this._chipLis ...

htmlangularangular-material

Submitting the form does not result in the textbox being cleared

I have been attempting to clear the txtSubTotal text box upon clicking the PROCEED button, but it seems that my efforts have been in vain despite trying various code examples, including those from SO. btnProceed/HTML <input type="submit" name="btnProc ...

javascriptphphtml

Maintaining an even distribution of flex children on each line as they wrap to the next line

I am curious about finding a way to maintain an even distribution of elements on each line, including the last one, using flex-wrap or any other flexbox technique. For example, let's say I have a flexbox with 6 elements. When it wraps, I would like t ...

htmlcssflexbox

Implementing dynamic CSS switching for right-to-left (RTL) support in a multilingual Next.js application

As I work on my multilanguage application with Next.js, I'm encountering a challenge in dynamically importing the RTL CSS file for Arabic language support. My aim is to seamlessly switch between RTL and LTR layouts based on the selected language. M ...

cssnext.jsi18nextdynamic-import

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

jqueryhtmlajaxjquery-uigoogle-visualization

Automatically synchronize dynatable with AJAX requests and JSON responses

I'm currently facing a bit of confusion as my code appears to be functioning properly, but the table is not updating as expected. xD I am fetching data from my database and loading it into a table, aiming for it to automatically update every three se ...

javascriptphphtmlajaxjson

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript

The size of text enclosed within div elements appears distorted

Having difficulty adjusting text size within div tags, specifically when trying to set it in pixels. For example, setting font-size to 20px while maintaining a div size of 250 by 50 pixels results in stretched out text. Here's the code snippet: .NavB ...

htmlcss