CODEWITHSUNDEEP
htmlioscsssafari
Alexander
Alexander

Reputation: 770

Unselectable text in HTML on iOS

If you visit this page on iOS, you will not be able to select any text.
This page doesn't contain any javascript or selection blocking code, actually if you open it on desktop browser everything will work.

I'm trying to implement EPUB3 reader on iOS and this page was generated with WYSIWYG EPUB3 editor.

So the problem is: How can I enable selection on this page without changing it visual layout?
And really important thing is: I'm hoping for solution which can be automated. So that I can preprocess this html files before opening in my reader.

Update: Selection starts working only when zoomed to about 400%.

Upvotes: 8

Views: 3124

Answers (4)

Matthew R.
Matthew R.

Reputation: 4350

Here is a cross-browser list of styles for non-selectable text:

-webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: moz-none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;

You can also set them to select text as well:

-webkit-touch-callout: default;
  -webkit-user-select: text;
   -khtml-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
       -o-user-select: text;
          user-select: text;

The -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.

The -khtml prefix predates the -webkit prefix and provides support for Safari 2.0-

The -moz prefix is defined twice with the value none and the value -moz-none on purpose. Using -moz-none rather than none prevents elements and sub-elements from being selectable. However some older browsers like Netscape won’t recognize moz-none so it’s still necessary to define none for them.

The -o prefix isn't supported but I have come across recommendations to include it for future proofing and it doesn't hurt unless minification is critical.

Non-prefixed property should be last in line.

Upvotes: 4

bridgepickup
bridgepickup

Reputation: 116

The computed height of #div8 is 0. Changing this to 100% fixes the issue for me.

Upvotes: 1

GilbertOOl
GilbertOOl

Reputation: 1309

Do u try this please :

body {
zoom: 1;
margin: 0;
padding: 0;
width: 512px;
height: 768px;
-webkit-user-select: text; // THIS ALLOW SELECT TEXT ON IOS
}

-webkit-user-select, which are also value : "none", "all", "element"

Upvotes: 1

Robert Fauver
Robert Fauver

Reputation: 1

drop

<meta charset="UTF-8" />

into the head

Upvotes: 0

Related Questions