Highlights on mobile

More specifically on iOS, but I guess in general.

Is the highlighting feature ever coming to mobile? Such a handy feature, but a shame that it can only be done in desktop.

1 Like

I was waiting for somebody to ask! If anything else wants to see this, please respond here. I’d love to build it, I just want to know that it’s wanted.

Count me among the customers who would really appreciate this feature. Right now, I tend to get halfway through an article before realizing that it is worth highlighting, which prompts me to add it to Instapaper so that I can highlight it. It would be great to have this built-in to the NewsBlur Android app so I don’t have to bounce between apps.

1 Like

I would also be interested in this feature!

Just to add to this, as of now whilst on my iPad I have to open NB articles in an external read-it-later app in order to make highlights. Since the process of highlighting is really ingrained in my overall reading experience I end up consuming the majority of my articles in that app rather than in NB, which is a shame because I much prefer NB’s reading experience. So in that sense NB has become a “mere” aggregator on my iPad and much less of an all-round app.

Ok I’ve prioritized this feature but it may take a little bit of time to launch as it was crazy complicated to do well on the web. It’ll be easier now that it’s written.

1 Like

Any chance of bringing highlights and notes to the Android app, too? The ticket seems to be specific to iOS devices.

I know, I wanted this too now, since i just tried to highlight and wasn’t able to on mobile. It’ll come after some story list updates we’re working on.

Hello, any updates on the highlighting feature?

As other users already mentioned, the lack of highlighting is what prevents me from using the NewsBlur Android app. I know I will probably want to highlight something and so I just leave to read it on Desktop instead.

@dejal @andrei How hard would it be to implement highlighting on mobile? We already support it on the API and on the web. I know that iOS used to make this easy but that may have changed.

I prompted Claude with researching how we do it on the web. I would prompt it further if you need to refine the html->text algorithm.

⏺ NewsBlur Text Highlighting API Documentation

  Overview

  NewsBlur's text highlighting feature allows users to highlight specific portions of text within saved/starred stories. This document explains
  how the feature works and how mobile clients can integrate with it.

  Data Model

  Highlights Storage

  Highlights are stored as an array of strings in the MStarredStory model:
  - Field: highlights - ListField containing strings (max 16,384 chars each)
  - Each highlight string represents a text selection from the story content
  - Multiple highlights can be saved per story

  Related Models

  - MStarredStoryCounts: Tracks counts including a special is_highlights flag for stories with highlights
  - Stories with highlights can be filtered separately from regular starred stories

  API Endpoints

  1. Save Story with Highlights

  Endpoints:
  - /reader/mark_story_as_starred (with story_id)
  - /reader/mark_story_hash_as_starred (with story_hash)

  Method: POST

  Parameters:
  - story_id or story_hash: Story identifier
  - feed_id: Feed ID (optional with story_hash)
  - highlights[]: Array of text strings to highlight
  - user_tags[]: Array of tags (optional)
  - user_notes: Notes (optional)

  Example Request:
  POST /reader/mark_story_hash_as_starred
  {
    "story_hash": "123:abc",
    "highlights[]": ["This is the highlighted text", "Another highlighted section"],
    "user_tags[]": ["important", "research"]
  }

  Response:
  {
    "code": 1,
    "message": "",
    "starred_count": 42,
    "starred_counts": [...]
  }

  2. Update Highlights on Existing Starred Story

  Use the same endpoints as above. The system will detect if the story is already starred and update the highlights array accordingly.

  3. Retrieve Starred Stories with Highlights

  Endpoint: /reader/load_starred_stories

  Method: GET

  Parameters:
  - highlights=true: Filter to only show stories with highlights
  - page: Page number (optional)
  - limit: Stories per page (default: 10)
  - order: "newest" or "oldest" (default: "newest")

  Example Request:
  GET /reader/load_starred_stories?highlights=true&limit=20

  Response:
  {
    "stories": [
      {
        "story_hash": "123:abc",
        "story_title": "Example Story",
        "story_content": "Full story content...",
        "highlights": ["First highlighted text", "Second highlighted text"],
        "user_tags": ["tag1", "tag2"],
        "user_notes": "My notes",
        "starred_date": "2024-01-15 10:30:00",
        ...
      }
    ]
  }

  4. Remove Highlights

  To remove highlights, call the star endpoint again with an empty highlights array or with only the highlights you want to keep.

  Highlight Display

  How Highlights Work

  1. Storage: Highlights are stored as exact text strings from the story content
  2. Matching: The web client uses a JavaScript library (mark.js) to find and highlight these text strings in the story content
  3. Styling: Highlighted text gets the CSS class NB-starred-story-selection-highlight

  Mobile Implementation Recommendations

  1. Saving Highlights:
    - Allow users to select text in the story view
    - Capture the exact selected text string
    - Send the text string(s) in the highlights[] parameter when starring
  2. Displaying Highlights:
    - When rendering a starred story, search for each highlight string in the story content
    - Apply visual highlighting (e.g., yellow background) to matched text
    - Handle case where text might appear multiple times (highlight all occurrences)
  3. Managing Highlights:
    - Show existing highlights when viewing a starred story
    - Allow users to tap highlighted text to remove it
    - Support adding new highlights to stories with existing highlights

  Important Notes

  - Premium Feature: Highlighting is only available to premium subscribers
  - Text Matching: Highlights are stored as exact text matches, so ensure the text is captured precisely
  - Multiple Highlights: A story can have multiple non-overlapping highlights
  - Persistence: Highlights are saved with the starred story and persist across sessions
  - Special Count: Stories with highlights can be counted separately using the MStarredStoryCounts model with is_highlights=true

  Example Implementation Flow

  1. User selects text in story view
  2. Capture selection and get exact text string
  3. Call API to save/update starred story with highlights
  4. On story display, search for highlight strings and apply visual styling
  5. Allow management through tap-to-remove or additional selection interface

  Error Handling

  - If story not found: {"code": -1, "message": "Could not find story to save."}
  - If save fails: {"code": -1, "message": "Could not save story due to: [error]"}
  - Premium required: Check for error messages about premium subscription requirements

Doable but not sure how difficult it will be until I dive deep into the code and see what are the edge cases or limitations. Regardless, I’ll put it in an issue in Github and start working on it once I finish the active refactoring task.

It’s definitely feasible. Not trivial, but the server endpoint API seems simple enough, and it’s possible to capture text selection in stories via JavaScript injection and WKWebView handlers.

We already have a GitHub issue for this as you linked above (#1698 iOS Highlighting), which has been making its way up my priority list.

Android: Story text hightlighting · Issue #1962 · samuelclay/NewsBlur · GitHub It’s going out this month